<template>
	<v-scale-screen :width="win.screen.width" :height="win.screen.height" fullScreen :delay="1000" fullscreen
		style="overflow:hidden;margin:0;padding:0;">
		<div class="page" id="page" ref="page">
			<div class="hd">
				<div class="hd-wrap">
					<div class="nowTime">
						<!-- {{city}}市&nbsp;&nbsp;&nbsp;&nbsp;{{nowtime}} -->
						<span>{{ nowtime }}</span>
						<!-- <span>2021年03月10日•星期三•10:12:01</span> -->
						<span style="margin-left:0.2rem;">今日天气: <img
								:src="'https://api.ykiot.net/static/images/yahoo/' + today.wea_img + '.png'" class="weaImg"
								:title="today.wea"><span style="margin-left:0.2rem;">温度:</span>
							{{ today.tem2 }}~{{ today.tem1 }}℃</span>
						<span v-if="win.screen.width > 1366" style="margin-left:0.2rem;">明日天气: <img
								:src="'https://api.ykiot.net/static/images/yahoo/' + torrmow.wea_img + '.png'"
								class="weaImg" :title="torrmow.wea"></span>
					</div>
					<!-- <div class="platFormTitle"><span>{{siteName}}</span></div> -->
					<div class="platFormTitle"><span>智慧水务监控系统</span></div>
					<div id="weather">
						<div class="exit" @click="goExit"><span class="exitIcon"><i class="el-icon-s-fold"
									style="font-size:0.45rem;"></i></span>退出监控</div>
						<div class="exit" v-if="isFullscreen" @click="bigScreen"><span class="exitIcon"><i
									class="el-icon-copy-document" style="font-size:0.45rem;"></i></span>退出大屏</div>
						<div class="exit" v-else @click="bigScreen"><span class="exitIcon"><i
									class="el-icon-full-screen" style="font-size:0.45rem;"></i></span>大屏显示</div>
						<div class="isScreen" @click="goMainData"><span class="isScreenIcon"><i
									class="el-icon-s-platform" style="font-size:0.45rem;"></i></span>监控中心</div>
					</div>
				</div>
			</div>
			<div class="main">
				<div class="main_left">
					<div class="main_left_top">
						<div class="pie_title">
							<!-- <img src="../../static/pie_blue.png" /> -->
							<span>水厂监控</span>
						</div>
						<div class="echartBox" style="line-height:1rem;font-size:0.3rem;padding-left:0.3rem;">
							<!-- <div class="viewItem"><i class="el-icon-s-fold"></i><span>今日供水量</span><span>1608</span><span>m³</span></div>
						<div class="viewItem"><i class="el-icon-s-fold"></i><span>今日耗电量</span><span>3556</span><span>kwh</span></div>
						<div class="viewItem"><i class="el-icon-s-fold"></i><span>吨水电耗</span><span>2.71</span><span>kwh/m³</span></div>
						<div class="viewItem"><i class="el-icon-s-fold"></i><span>瞬时流量</span><span>166.3</span><span>m³/h</span></div>
						<div class="viewItem"><i class="el-icon-s-fold"></i><span>出水压力</span><span>0.25</span><span>MPa</span></div> -->
							<div class="viewItem"><img
									src="../../static/viewIcon1.png" /><span>今日供水量</span><span>1608</span><span>m³</span>
							</div>
							<div class="viewItem"><img
									src="../../static/viewIcon2.png" /><span>今日耗电量</span><span>3556</span><span>kwh</span>
							</div>
							<div class="viewItem"><img
									src="../../static/viewIcon3.png" /><span>吨水电耗</span><span>2.71</span><span>kwh/m³</span>
							</div>
							<div class="viewItem"><img
									src="../../static/viewIcon4.png" /><span>瞬时流量</span><span>166.3</span><span>m³/h</span>
							</div>
							<div class="viewItem"><img
									src="../../static/viewIcon5.png" /><span>出水压力</span><span>0.25</span><span>MPa</span>
							</div>
						</div>
						<!-- <div class="productTotal">{{platformCount.products_count}}</div>
					<div class="userTotal">{{platformCount.users_count}}</div>
					<div class="nameProduct">项目总数</div>
					<div class="nameUser">用户总数</div>
					<div class="deviceTotal">{{platformCount.equips_count}}</div>
					<div class="viewTotal">{{platformCount.views_count}}</div>
					<div class="nameDevice">设备总数</div>
					<div class="nameView">组态总数</div>-->
						<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					</div>
					<div class="main_left_middle">
						<div class="pie_title">
							<!-- <img src="../../static/pie_blue.png" /> -->
							<span>今日用水量趋势</span>
						</div>
						<div id="waterBar" ref="waterBar"></div>
						<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					</div>
					<div class="main_left_bottom">
						<div class="pie_title">
							<!-- <img src="../../static/pie_blue.png" /> -->
							<span>工单监控</span>
						</div>
						<div class="echartBox">
							<div class="topBox">
								<div class="topBoxOne">
									<i class="el-icon-s-promotion"></i>
									<div style="color:#fff;">
										<p>今日上报(个)</p>
										<span style="font-size:0.45rem;font-weight:600;">20</span>
									</div>
								</div>
								<div class="topBoxTwo">
									<i class="el-icon-circle-check"></i>
									<div style="color:#fff;">
										<p>今日完工(个)</p>
										<span style="font-size:0.45rem;font-weight:600;">10</span>
									</div>
								</div>
							</div>
							<div class="bottomBox">
								<div style="width:100%;color:#fff;line-height:1.2rem;">完成率</div>
								<!-- text-color改变文字颜色的属性不起作用，改为了用样式改变 -->
								<el-progress :percentage="50" style="width:60%;margin:0 auto;color:#fff;"
									:stroke-width="15" text-color="#fff"></el-progress>
							</div>
						</div>
						<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					</div>
				</div>
				<div class="main_center">
					<!-- <div class="main_center_top"> -->
					<div class="centerTotal">
						<div class="totalItem">
							<div>10745.8</div>
							<div>总供水量(万m³)</div>
						</div>
						<div class="totalItem">
							<div>10550.45</div>
							<div>总售水量(万m³)</div>
						</div>
						<div class="totalItem">
							<div>1.78%</div>
							<div>产销差率</div>
						</div>
						<div class="totalItem">
							<div>99.76%</div>
							<div>水费回收率</div>
						</div>
					</div>
					<div v-show="form.content_type == 'map'" class="content" id="map"></div>


					<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					<!-- </div> -->
					<!-- <div class="main_center_bottom">
					<div id="echartBar" ref="echartBar"></div>
					<i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i>
				</div> -->
				</div>
				<div class="main_right">
					<div class="main_right_top" ref="videoBox">
						<div class="pie_title">
							<!-- <img src="../../static/pie_blue.png" /> -->
							<span>设备统计</span>
						</div>
						<div id="devInfo">
							<span>设备总量:</span><span style="color:#2984ff;"
								class="bigWord">{{ equipCount.equips_count }}</span></br>
							<span>在线正常:</span><span style="color:#30B4FF;"
								class="bigWord">{{ equipCount.online_equips_count }}</span></br>
							<span>欠费设备:</span><span style="color:#F74B9E;"
								class="bigWord">{{ equipCount.qianfei_equips_count }}</span></br>
							<span>离线设备:</span><span style="color:#FFB246;"
								class="bigWord">{{ equipCount.offline_equips_count }}</span>
						</div>
						<div id="echartPie" ref="echartPie"></div>
						<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					</div>
					<div class="main_right_middle">
						<div class="pie_title">
							<!-- <img src="../../static/pie_blue.png" /> -->
							<span>近七日新增客户</span>
						</div>
						<div id="echartBar" ref="echartBar"></div>

						<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					</div>
					<div class="main_right_bottom">
						<div class="pie_title">
							<!-- <img src="../../static/alarm_icon.png" /> -->
							<span>事件告警</span>
						</div>

						<div class="alarm_list">
							<dv-scroll-board :config="config" style="width:96%;height:88%;margin:0 auto;" />
							<!-- <div v-for="(item,i) in newAlarmData" :key="i">
							<p class="alarm_time">{{item.alarm_time}}</p>
							<div class="alarm_info">
								<p><span class="alarm_point">•</span><span style="margin-right:0.1rem;">项目:</span><span>{{item.product_name}}</span></p>
								<p><span class="alarm_point">•</span><span style="margin-right:0.1rem;">设备:</span><span>{{item.equip_name}}</span></p>
								<p v-if="item.slave_name"><span
										class="alarm_point">•</span><span style="margin-right:0.1rem;">分组名称:</span><span>{{item.sgroup_name}}</span></p>
								<p><span class="alarm_point">•</span><span style="margin-right:0.1rem;">报警内容:</span><span>{{item.content}}</span></p>
								<p v-if="item.remark"><span class="alarm_point">•</span><span style="margin-right:0.1rem;">备注:</span><span>{{item.remark}}</span>
								</p>
							</div>
						</div> -->
						</div>
						<!-- <div v-else class="noAlarm">
						暂无报警信息
					</div> -->
						<!-- <i class="el-icon-arrow-left topLeftArrow"></i>
					<i class="el-icon-arrow-left topRightArrow"></i>
					<i class="el-icon-arrow-left bottomLeftArrow"></i>
					<i class="el-icon-arrow-left bottomRightArrow"></i> -->
					</div>

				</div>
			</div>
			<el-dialog width="80%" :visible.sync="innerVisible" v-el-dialog-drag append-to-body :show-close="close"
				:top="win.screen.width >= 1600 ? '150px' : '40px'" class="dial">
				<div class="toptit">
					<span>{{ nowSensor }}</span> | <span>{{ which }}</span>
					<span style="float:right;cursor: pointer;" @click="closeLine">关闭</span>
				</div>
				<!-- <div  class="bottom_top_left" style="width:100%;float:none;height:1rem;line-height:1rem;padding:0;" @click="changeBox"> -->
				<div v-if="sensorSave != 2" class="bottom_top"
					style="width:100%;height:0.8rem;line-height:0.8rem;padding:0;margin-top:0.1rem;border:none;background-position:left center;"
					@click="changeBox">
					<div id="live" class="live" :class="chart == 'live' ? 'cardActive' : ''">
						实时曲线
					</div>
					<div id="story" class="story" :class="chart == 'story' ? 'cardActive' : ''">
						历史曲线
					</div>
				</div>
				<div class="chartTime big" v-show="chart == 'story'">
					<span style="font-size: 0.35rem;">时间:</span>
					<el-date-picker v-model="form.value" type="daterange" align="left" class="inpu"
						@change="changeChart(form.value)" unlink-panels value-format="yyyy-MM-dd" range-separator="~"
						start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div id="myChart" v-if="chart == 'story' && !lineout" v-loading="loading_1"
					element-loading-text="正在加载中...">
				</div>
				<div id="without" v-if="chart == 'story' && lineout == 'story'">抱歉,该数据点暂无历史数据！</div>
				<div id="myChartLive" ref="myChartLive" v-show="chart == 'live' && !lineout" v-loading="loading_2"
					element-loading-text="等待数据传输中..."></div>
				<div id="without" v-show="chart == 'live' && lineout == 'live'">抱歉,该数据点暂无实时数据！</div>
			</el-dialog>
			<!-- 可变状态改值对话框 -->
			<el-dialog :visible="dialogFormVisible" width="30%" append-to-body :show-close="false" top="300px">
				<div class="toptit">
					<span>改变状态 | {{ sateForm.sensor_name }}</span>
					<span style="float:right;cursor: pointer;" @click="dialogFormVisible = false">关闭</span>
				</div>
				<el-form :model="sateForm" style="text-align:center;margin-top:0.1rem;" inline>
					<el-form-item>
						<el-button type="primary" size="small" class="alarmOper" @click="setStateVal(0)">置0</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" class="alarmOper" style="margin-left:0.2rem;"
							@click="setStateVal(1)">置1</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" class="alarmOper" style="margin-left:0.2rem;"
							@click="letOneToZero">先置1，后置0
						</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" class="alarmOper" style="margin-left:0.2rem;"
							@click="letZeroToOne">先置0，后置1
						</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 可清除报警对话框 -->
			<el-dialog :visible="dialogFormVisible_2" width="22%" append-to-body :show-close="false" top="200px">
				<div class="toptit">
					<span>清除报警 | {{ sateForm.sensor_name }}</span>
					<span style="float:right;cursor: pointer;" @click="dialogFormVisible_2 = false">关闭</span>
				</div>
				<el-form :model="sateForm" style="text-align:center;margin-top:0.3rem;" inline>
					<el-form-item>
						<el-button type="primary" size="small" class="alarmOper" @click="setStateVal(0)">清除</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" class="alarmOper" style="margin-left:0.2rem;"
							@click="dialogFormVisible_2 = false">保留</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<el-dialog :visible="dialogSwiperVisible" :width="win.screen.width >= 1600 ? '22%' : '34%'" append-to-body
				:show-close="close" top="220px">
				<div class="toptit">
					<span>图纸轮播设置</span>
					<span style="float: right; cursor: pointer" @click="dialogSwiperVisible = false">关闭</span>
				</div>
				<el-form :model="viewForm" style="text-align: left;margin-top:0.3rem;" block>
					<el-form-item label="轮播间隔:" label-width="110px">
						<el-input style="width:3rem" class="swiperInput" v-model="viewForm.interval"
							placeholder="30秒至600秒" type="number" :min="30" :max="600" :step="10"
							@change="changeInterval(viewForm.interval)"></el-input> s
					</el-form-item>
					<el-form-item label="" label-width="110px" style="margin-top:-0.1rem !important;">
						<p style="font-size:0.3rem;color:red;">注:限制30至600秒,默认60秒</p>
					</el-form-item>
				</el-form>
				<div style="text-align: right; margin-top: 0.3rem">
					<el-button type="primary" size="small" class="swiperBtn" @click="showTrunView(viewForm.interval)">确
						认</el-button>
					<el-button size="small" class="swiperBtn" style="background-color: #fff;color:#333;"
						@click="dialogSwiperVisible = false">取 消</el-button>
				</div>
			</el-dialog>
		</div>
	</v-scale-screen>
</template>

<script>
export default {
	name: 'screenTotal',
	data() {
		return {
			config: {
				header: ['事件来源', '发生时间', '报警内容', '报警值'],
				data: [
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
					['风景御园', '08-30 04:34', '流量高高限', '900'],
				],
				columnWidth: [80]
			},
			textColor: '#fff',



			grade: localStorage.getItem("grade"),
			fromPage: '',
			fromOrder: '1',
			tokenTimer: null,
			//alarmTimer:null,
			siteName: localStorage.getItem("site_name") || '云控物联数据监控平台',
			one: 1,
			zero: 0,
			grade: 1,
			win: window,
			map: null,
			myIcon: null,
			markers: [],
			allAlarmTimer: null,
			alarmSocket: null,
			infoWindow: null,
			lostDevice: [],
			points: [],
			today: {
				wea_img: 'qing',
				wea: '',
				tem1: '',
				tem2: ''
				//win: ["东风", "东风"]
			},
			torrmow: {
				wea_img: 'qing',
				wea: '',
				tem1: '',
				tem2: ''
				//win: ["东风", "东风"]
			},
			city: "西安",
			nowtime: '',
			tianqi: false,
			isFullscreen: false,
			isFullViewscreen: false,
			baseurl: this.$baseurl,
			//box: 'live',
			wsUrl: this.$wssUrl,
			stateWidth: 56,
			stateWidth_2: 80,
			isOn: 0,
			Socket: null,
			loading_1: false,
			loading_2: true,
			chart: '',
			loading_1: false,
			loading_2: true,
			nowSensor: '',
			which: '',
			lineout: '',
			sensorSave: 1,
			chartItem: {},
			equipdata: [],
			viewList: [],
			drawList: [],
			fullList: false,
			nowDraw: '',
			after: 2000,
			newAlarmData: [],
			platformCount: {
				products_count: 0,
				users_count: 0,
				equips_count: 0,
				views_count: 0
			},
			equipCount: {
				equips_count: 100,
				online_equips_count: 91,
				qianfei_equips_count: 3,
				offline_equips_count: 6
			},
			oneEquipData: {},
			oneDeviceForm: {
				id: 0,
				type: 1,
				data_type: 1,
				equip_name: '',
				sgroup_id: 0,
				time: '',
				index: 0
			},
			viewForm: {
				id: 0,
				view_name: '',
				stage_id: 0,
				interval: 60
			},
			swiperTimer: null,
			isPlay: false,      //是否正在图纸轮播
			isSwiper: false,    //是否执行过图纸轮播
			start: 0,
			dialogSwiperVisible: false,
			dataTypes: [{
				value: 1,
				label: '实时数据'
			},
			{
				value: 2,
				label: '参数数据'
			}
			],
			sateForm: {
				type: 1,
				sensor_name: '',
				equip_id: 0,
				slave_id: 0,
				value: '',
				id: 0,
				ext_vars: {}
			},
			threeSW: '',
			poid: 0,
			dialogFormVisible: false,
			dialogFormVisible_2: false,
			dialogFormVisible_4: false,
			innerVisible: false,
			close: false,
			alarmEquips: [],

			form: {
				option: 0,
				content_type: 'map',
				value: ''
			},

			timer: null,
			nowTimer: null,
			weaTimer: null,

			pickerOptions: this.$pickerOptionsSimple,
			//chartValue: [],
			chartItem: {},
			options: [{
				value: 0,
				label: '全部',
				disabled: false
			}],

			option_pie: {
				grid: {
					width: 'auto',
					height: 'auto',
					left: '0%',
					top: 0,
					bottom: 0
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				// legend: {
				// 	//orient: 'h',
				// 	left: 'left',
				// 	data: ['运行', '停止', '离线']
				// },
				series: [{
					name: '运行状态',
					type: 'pie',
					radius: '80%', //控制饼占的大小
					label: {
						position: 'inside',
						fontSize: 14
					},
					labelLine: {
						length: 10,
						length2: 10
					},
					center: ['50%', '46%'],
					// label: {
					// 	normal: {
					// 		show: true,
					// 		formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
					// 	}
					// },
					data: [{
						value: 0,
						name: '正常',
						itemStyle: {
							color: "#30B4FF",//008500
						}
					}, {
						value: 0,
						name: '欠费',
						itemStyle: {
							color: "#FFB246",
						}
					}, {
						value: 0,
						name: '报警',
						itemStyle: {
							color: "#F54C9E"
						}
					}],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			},
			chartTwo: null,
			option_bar: {
				title: {
					text: '',
					left: 'center',
					top: '10px',
					textStyle: {
						color: "white",
						fontSize: 16
					},
					show: false
				},
				// legend: {
				//     data:['用户','设备'],
				// 	left: 'left'
				// },
				grid: {
					width: '86%',
					height: '78%',
					left: '9%',
					top: '20px'
				},
				textStyle: {
					color: "white"
				},
				// 	dataZoom: [{
				// 			id: 'dataZoomX',
				// 			type: 'slider',
				// 			show: true,
				// 			start:0,
				// 			end: 100,
				// 			// handleSize: 8,
				// 			xAxisIndex: [0],
				// 			filterMode: 'filter'
				// 		}

				// 	],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#283b56',
						}
					},
					textStyle: {
						align: 'left' //提示框文字的对齐方式
					}
				},
				xAxis: {
					type: 'category', //类目轴
					data: ['06-04', '06-05', '06-06', '06-06', '06-08', '06-09', '06-10'],
					name: '',
					nameGap: 10, //坐标轴名称与轴线的距离
					//interval: 0,  //无法在类目轴中使用
					boundaryGap: true, //类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
					axisLabel: {
						//margin:10
					},
					axisLine: {
						lineStyle: {
							color: '#fff'   //刻度线的颜色
						},
					},
					axisTick: {
						length: 6,
						alignWithLabel: true //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
					}
				},
				yAxis: [{
					type: 'value',
					//scale: true,
					name: '',
					axisLine: {
						lineStyle: {
							color: '#fff'   //刻度线的颜色
						},
					}
					// max:100,
					// min: 0,
					//interval: 10 //y轴标签值的间隔步长
					// boundaryGap: [0.2, 0.2]
				}],
				series: [

					{
						name: '新增用户',
						type: 'bar',
						data: [12, 13, 14, 15, 16, 17, 18],
						yAxisIndex: 0,
						barMinHeight: 0,
						barWidth: 30,
						// markPoint: {
						// 	data: [{
						// 		type: 'max',
						// 		name: '最大值'
						// 	}, {
						// 		type: 'min',
						// 		name: '最小值'
						// 	}]
						// },
						// markLine: {
						// 	data: [{
						// 		type: 'average',
						// 		name: '平均值'
						// 	}]
						// },
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									// color: "#eee"
									color: "#4FB9EA" //#90e0d0
								}, {
									offset: 1,
									color: "#2984FF"
									// color: "#cc0000"
								}], false)
							}
						}
						// barMaxWidth:100,
						// barMinWidth:30
					},
				]
			},
			water_option: {
				//曲线渐变效果，需在echarts插件中加入visualMap(视觉映射)组件
				// visualMap: [{
				//         show:true,
				//         type: 'continuous',
				//         seriesIndex: 0,
				//         min: 0,
				//         max: 400
				// }],
				//backgroundColor:'red',//背景颜色,类似与‘dark’一样表示一种模式
				title: {
					text: '历史时段数据曲线图',
					left: '1%',
					top: 5,
					show: false,
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				grid: {
					width: '85%',
					height: '78%',
					left: '10%',
					top: '20px'
				},


				tooltip: {
					trigger: 'axis'
				},
				textStyle: {
					color: "white"
				},
				xAxis: {
					data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
					type: 'category',  //结合下面的areaStyle形成曲线围成面积区域
					name: '',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						showMinLabel: true,
						showMaxLabel: true
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						},
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '',
					axisLabel: {
						margin: 10
						// color:"white"
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}
				},
				series: [{
					name: '',
					type: 'line',
					areaStyle: {},    //结合上面的面的xAxis形成曲线围成面积区域
					data: [102, 95, 91, 96, 80, 82, 85],
					// markPoint: {
					// 	data: [{
					// 		type: 'max',
					// 		name: '最大值'
					// 	}, {
					// 		type: 'min',
					// 		name: '最小值'
					// 	}]
					// },
					// markLine: {
					// 	data: [{
					// 		type: 'average',
					// 		name: '平均值'
					// 	}]
					// },

					itemStyle: {
						normal: {
							color: "deepskyblue"
						}
					},

					itemStyle: {
						normal: {
							//设置渐变效果
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#90e0d0" //#90e0d0
							}, {
								offset: 1,
								color: "deepskyblue"
							}], false)
						}
					},
					smooth: true
				}]
			},




			ch_option: {
				//曲线渐变效果，需在echarts插件中加入visualMap(视觉映射)组件
				// visualMap: [{
				//         show:true,
				//         type: 'continuous',
				//         seriesIndex: 0,
				//         min: 0,
				//         max: 400
				// }],
				//backgroundColor:'red',//背景颜色,类似与‘dark’一样表示一种模式
				title: {
					text: '历史时段数据曲线图',
					left: '1%',
					top: 5,
					textStyle: { //全局文字样式不包含它
						color: "white"
					}
				},
				grid: {
					width: '92%',
					height: '250px',
					left: '4%',
					top: 75
				},
				toolbox: {
					show: true,
					right: 30,
					iconStyle: {
						borderColor: "#eee"
					},
					feature: {
						dataZoom: {
							show: false
						},
						dataView: {
							show: false,
							readOnly: true
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {
							backgroundColor: '#0b2c51',
							excludeComponents: ['toolbox', 'dataZoom'] //导出图片时不显示这两个组件
						}
					}
				},
				dataZoom: [{
					id: 'dataZoomX',
					type: 'slider',
					show: true,
					start: 80,
					end: 100,
					filterMode: 'filter',
					fillerColor: '#666',
					backgroundColor: '#ccc',
					handleStyle: {
						color: 'red'
					},
					top: '380px'
				}

				],
				tooltip: {
					trigger: 'axis'
				},
				textStyle: {
					color: "white"
				},
				xAxis: {
					data: [],
					//type:'category',  //结合下面的areaStyle形成曲线围成面积区域
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						showMinLabel: true,
						showMaxLabel: true
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						},
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10
						// color:"white"
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}
				},
				series: [{
					name: '',
					type: 'line',
					//areaStyle: {},    //结合上面的面的xAxis形成曲线围成面积区域
					data: [],
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},

					// itemStyle:{
					//    normal:{
					// 	  color:"#0b2c51"
					//    }
					// },

					// itemStyle: {
					//     normal: {
					//         //设置渐变效果
					//         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					//             offset: 0,
					//             color: "#ccc" //#90e0d0
					//         }, {
					//             offset: 1,
					//             color: "#0b2c51"
					//         }], false)
					//     }
					// },
					smooth: true
				}]
			},
			live_option: {
				title: {
					text: '实时同步数据曲线图',
					left: '1%',
					top: 10,
					textStyle: { //全局文字样式不包含它
						color: "white",
						fontSize: 14
					}
				},
				grid: {
					width: '92%',
					height: '290px',
					left: '4%',
					top: 80,

				},
				textStyle: {
					color: "white"
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					data: [],
					name: '时间',
					boundaryGap: false,
					axisLabel: {
						margin: 10,
						showMinLabel: true,
						showMaxLabel: true
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						},
						alignWithLabel: true
					}
				},
				yAxis: {
					type: 'value',
					name: '值',
					axisLabel: {
						margin: 10
						// color:"white"
					},
					axisTick: {
						length: 6,
						lineStyle: {
							color: "white"
						}
					}
				},
				series: [{
					name: '',
					type: 'line',
					data: [],
					label: {
						show: true,
						formatter: '{c}'
					},
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					smooth: true
				}]
			}

		}
	},

	beforeRouteEnter(to, from, next) {
		//不可以访问this;
		//console.log(from.name);
		next(vm => {
			vm.fromPage = from.name;
			vm.fromOrder = from.meta.order;
			console.log(vm.fromPage);
		})
	},

	created() {
		var that = this;
		this.grade = Number(localStorage.getItem("atuser_type"));
		this.form.value = [that.getNowFormatDate(), that.getNowFormatDate()];
		this.getNowCityWeather();
		//this.getNewAlarm(1, 5);
	},

	mounted() {
		var that = this;
		this.getEquipTotal();
		this.getWaterLine();
		this.getWeekUser();
		setTimeout(function () {
			that.bigScreen();
		}, 1000)
		this.getEquip(0);
		//this.getProduct();
		// setTimeout(function(){
		//    that.getAllAlarm();
		// },2000)
		if (window.screen.width <= 1366 && window.screen.width >= 1360) {
			this.option_bar.grid.height = "64%";
		} else if (window.screen.width <= 1280) {
			this.option_bar.title.textStyle.fontSize = 14;
			this.option_bar.grid.height = "58%";
			this.option_bar.grid.width = "85%";

		}
		this.nowTimer = setInterval(function () {
			that.nowtime = that.getNowTime();
		}, 1000);
		this.getToken();
		this.tokenTimer = setInterval(function () {
			that.getToken();
		}, 10200000);
		//this.platformTotal();
		//零时方案，每隔两分钟刷新最新报警
		// this.alarmTimer=setInterval(function(){
		// 	if(that.form.option==0){
		// 		that.platformTotal();
		// 	}else{
		// 		that.productTotal(that.form.option);
		// 	}
		// 	that.getNewAlarm(1,5);
		// 	that.refreshWeekAlarm(that.form.option);
		// },120000);
	},

	methods: {
		//实时报警全局函数,这里只用于更换图标；
		getAllAlarm() {
			var that = this;
			//console.log("homeAlarm");
			this.alarmSocket = new WebSocket(this.wsUrl);
			if (this.alarmSocket.readyState != WebSocket.OPEN) {
				this.alarmSocket.onopen = function () {
					var pingData = {
						action: "alarm",
						data: {
							user_id: localStorage.getItem('userId'),
							token: localStorage.getItem("yktoken")
						}
					};
					that.alarmSocket.send(JSON.stringify(pingData));
					that.allAlarmTimer = setInterval(function () {
						that.alarmSocket.send(JSON.stringify(pingData));
					}, 30000);
					console.log('连接成功')
				};
			};
			this.alarmSocket.onerror = this.onAlarmError;
			this.alarmSocket.onmessage = this.onAlarmMessage;
		},

		onAlarmError(e) {
			var that = this;
			//console.log("连接失败，尝试重连")
			this.alarmSocket.close();
			clearInterval(that.allAlarmTimer);
			//this.getALLAlarm();
		},


		onAlarmMessage(msg) {
			var that = this;
			var messageData = JSON.parse(msg.data);
			//console.log(messageData);
			if (messageData.result == "success" && this.isObject(messageData.data)) {
				var liveDatas = messageData.data;
				//console.log(liveDatas);
				var icon = "";
				var state = '';
				if (liveDatas.status == 'alarm') {  //报警
					state = "alarm";
					icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
				} else if (liveDatas.status == 'connect' || liveDatas.status == 'online') {
					state = "online";
					icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
				} else if (liveDatas.status == 'disconnect' || liveDatas.status == 'powerdown') {
					state = "offline";
					icon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
				}
				if (this.form.option == 0) {
					this.platformTotal();
				} else {
					this.productTotal(this.form.option);
				}
				this.getNewAlarm(1, 5);
				this.refreshWeekAlarm(this.form.option);
				for (let i = 0, len = this.equipdata.length; i < len; i++) {
					if (this.equipdata[i].id == liveDatas.equip_id) {
						this.equipdata[i].stateIcon = icon;
						if (state == "alarm") {
							this.equipdata[i].is_alarm = 1;
						} else if (state == "online") {
							this.equipdata[i].is_alarm = 0;
							this.equipdata[i].is_on = 1;
						} else if (state == "offline") {
							this.equipdata[i].is_alarm = 0;
							this.equipdata[i].is_on = 0;
						}
						for (let m = 0, len2 = this.markers.length; m < len2; m++) {
							if (this.markers[m].w.label.content == liveDatas.equip_name) {
								//直接更换图标
								this.markers[m].setIcon(new AMap.Icon({
									size: [12, 24],
									imageSize: [12, 24],
									image: icon
								}));
								this.markers[m].setTop(true);//如多个聚集，至于顶层
								//this.markers[m].setAnimation("AMAP_ANIMATION_DROP");  //动画效果，掉落动画
								//下面是通过先删除后添加的方式实现更换图标；
								// this.markers[m].setMap(null);
								// this.markers.splice(m,1);
								// let point = [
								// 			that.equipdata[i].geo_coord[0],
								// 			that.equipdata[i].geo_coord[1]
								// 	];
								// this.addMarker(point, that.equipdata[i]);
								break;
							}
						}
						break;
					}
				}
			} else {
				console.log(messageData.message);
			}
		},


		getNowCityWeather() {
			var that = this;
			//高德地图IP定位获取当前城市信息，相对于精确定位更快捷方便
			AMap.plugin('AMap.CitySearch', function () {
				var citySearch = new AMap.CitySearch()
				citySearch.getLocalCity(function (status, res) {
					if (status === 'complete' && res.info === 'OK') {
						// 查询成功，res即为当前所在城市信息
						var addr = res.city;
						//addr有可能是XXXX州(例如西藏/新疆境内)和XXXX市，后者要去掉“市”字；
						if (addr[addr.length - 1] == '市') {
							that.city = addr.substr(0, addr.length - 1); //去掉“市”字；
						} else {
							that.city = addr;
						}
						that.getWeather(that.city);
					} else {
						console.log(res.info);
					}
				})
			});
			setTimeout(function () {
				that.tianqi = true;
			}, 500);
			this.weaTimer = setInterval(that.getWeather(that.city), 3600000);
		},

		getWeather(city = '西安') {
			var that = this;
			//以下是专业七日天气，准确实时，365元/年
			//https://v0.yiketianqi.com/api?version=v9&appid=&appsecret=
			//以下是免费七日天气,极为不准，日限制300次
			//https://tianqiapi.com/api?version=v1&appid=&appsecret=
			//以下是只提供当天实况天气,而且不准,免费，日限制300次
			//"https://tianqiapi.com/api?version=v6&appid=56695554&appsecret=BkVKcM9h&city="
			fetch("https://v0.yiketianqi.com/api?version=v9&appid=56695554&appsecret=BkVKcM9h&city=" + city)
				.then(res => res.json())
				.then(function (data) {
					//console.log(data);
					that.today = data.data[0];
					that.torrmow = data.data[1];
					if (!that.today.wea_img) {
						that.today.wea_img = "qing";
					}
					if (!that.torrmow.wea_img) {
						that.torrmow.wea_img = "qing";
					}
					//console.log(that.today);
				}).catch(error => {
					console.log(error.message)
				});
		},

		getEquipTotal() {
			var that = this;
			this.equipCount.equips_count = 100;
			this.equipCount.qianfei_equips_count = 3;
			//设备统计饼图
			var chart1 = this.$refs.echartPie;
			var chartOne = echarts.init(chart1);
			this.option_pie.series[0].data[0].value = 91;
			this.option_pie.series[0].data[1].value = 3;
			this.option_pie.series[0].data[2].value = 6;
			chartOne.setOption(that.option_pie);
			//that.loading = false;
			window.addEventListener("resize", () => {
				chartOne.resize();
			})
		},



		//平台统计函数
		platformTotal() {
			var that = this;
			this.$http({
				method: "post",
				url: "api/index/counts",
				data: {}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.platformCount = res.data.data;
					this.equipCount = Object.assign({}, res.data.data);
					//设备统计饼图
					var chart1 = this.$refs.echartPie;
					var chartOne = echarts.init(chart1);
					this.option_pie.series[0].data[0].value = res.data.data.online_equips_count;
					this.option_pie.series[0].data[1].value = res.data.data.offline_equips_count;
					this.option_pie.series[0].data[2].value = res.data.data.alarm_equips_count;
					chartOne.setOption(that.option_pie);
					//that.loading = false;
					window.addEventListener("resize", () => {
						chartOne.resize();
					})
				}
			})
				.catch(error => {
					console.log(error);
				});
		},

		//项目内统计函数
		productTotal(id) {
			var that = this;
			this.$http({
				method: "post",
				url: "api/equip/counts",
				data: {
					"product_id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.equipCount = res.data.data;
					//设备统计饼图
					var chart1 = this.$refs.echartPie;
					var chartOne = echarts.init(chart1);
					this.option_pie.series[0].data[0].value = res.data.data.online_equips_count;
					this.option_pie.series[0].data[1].value = res.data.data.offline_equips_count;
					this.option_pie.series[0].data[2].value = res.data.data.alarm_equips_count;
					chartOne.setOption(that.option_pie);
					//that.loading = false;
					window.addEventListener("resize", () => {
						chartOne.resize();
					})
				}
			}).catch(error => {
				console.log(error);
			});
		},

		getProduct() {
			var that = this;
			this.options = [{
				value: 0,
				label: '全部',
				disabled: false
			}];
			this.$http({
				method: 'post',
				async: false,
				url: 'api/product/all',
				data: {}
			}).then(res => {
				//console.log(res.data.data)
				if (res && res.data.result == "success") {
					for (let i = 0; i < res.data.data.length; i++) {
						if (res.data.data[i].equips_count || res.data.data[i].views_count) {
							let option = {
								value: res.data.data[i].id,
								label: res.data.data[i].product_name,
								equips_count: res.data.data[i].equips_count,
								views_count: res.data.data[i].views_count,
								//cameras_count:res.data.data[i].cameras_count,
								//product_index:res.data.data[i].product_index
								//disabled: res.data.data[i].equips_count || res.data.data[i].views_count?false : true
								disabled: false
							}
							that.options.push(option);
						}
					}
					if (this.grade == 1) {
						if (res.data.share.equips_count || res.data.share.views_count) {
							var shareOption = {
								value: -1,
								label: res.data.share.product_name,
								equips_count: res.data.share.equips_count,
								views_count: res.data.share.views_count,
								//cameras_count:res.data.share.cameras_count,
								//product_index:'data'//分享的设备统一默认监控方式为实时数据
								//disabled: res.data.share.equips_count || res.data.share.views_count?false : true
								disabled: false
							};
							this.options.push(shareOption);
						}
					}
					for (let n = 0; n < that.options.length; n++) {
						if (!that.options[n].disabled) {
							that.form.option = that.options[n].value;
							that.getEquip(that.form.option);
							//that.getEquipAll(that.form.option);
							that.getWeekAlarm(that.form.option);
							break; //取首个
						}
					}
				}
			}).catch(error => {
				console.log(error);
			});
		},

		getEquip(id) {
			var that = this;
			this.equipdata = [];
			this.markers = [];
			this.$http({
				method: "post",
				url: "api/equip/all",
				data: id == -1 ? {
					"product_id": 0,
					"run_mode": 1,
					"is_shared": 1
				} : {
					"product_id": id,
					"run_mode": 1
				}
			}).then((res) => {
				if (res && res.data.result == "success") {
					this.equipdata = res.data.data;
					for (let i = 0, len = this.equipdata.length; i < len; i++) {
						this.$set(this.equipdata[i], 'stateIcon', '');
						if (this.equipdata[i].is_on == 0) {
							this.equipdata[i].stateIcon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
						} else if (this.equipdata[i].is_on == 1) {
							if (this.equipdata[i].is_alarm == 1) {
								this.equipdata[i].stateIcon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
							} else {
								this.equipdata[i].stateIcon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
							}
						}
					}
				} else {
					this.equipdata = [];
				}
				if (this.form.content_type == 'map') {
					this.showMap();
				}
				if (this.equipdata.length && this.form.content_type == 'data') {
					this.oneDeviceForm.id = that.equipdata[0].id;
					this.oneDeviceForm.equip_name = that.equipdata[0].equip_name;
					this.oneDeviceForm.type = that.equipdata[0].type;
					this.oneDeviceForm.index = 0;
					this.getView(that.equipdata[0].id);
					setTimeout(function () {
						that.getSensors(that.equipdata[0].id);
					}, 1000);
				} else {
					this.oneDeviceForm.id = '';
					this.oneDeviceForm.equip_name = '';
				}
			}).catch((error) => {
				console.log(error);
			});
		},

		showEquip(item, type, index) {
			var that = this;
			if (type == 'map') {
				this.getInfoAndAddress(item.id, true);
			} else if (type == 'data') {
				if (this.oneDeviceForm.id != item.id) {
					if (this.Socket) {
						clearInterval(that.timer);
						this.Socket.close();
					}
					this.oneDeviceForm.id = item.id;
					this.oneDeviceForm.equip_name = item.equip_name;
					this.oneDeviceForm.type = item.type;
					this.oneDeviceForm.index = index;
					this.getView(item.id);
					setTimeout(function () {
						that.getSensors(item.id);
					}, 1000);
				}
			}

		},

		showView(item, type) {
			if (this.viewForm.id != item.id) {
				this.viewForm.id = item.id;
				this.viewForm.view_name = item.view_name;
				this.getStageAll(item.id);
			}
		},

		getViewAll(id) {
			var that = this;
			//this.showView=false;
			//var share = id == 0 ? 1 : 0;
			this.viewList = [];
			this.$http({
				method: 'post',
				async: false,
				url: 'api/view/all',
				data: (this.grade == 1 && id == -1) ? {
					"product_id": 0,
					"is_shared": 1
				} : {
					"product_id": id,
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data.length) {
						this.viewList = res.data.data;
						this.viewForm.id = this.viewList[0].id;
						this.viewForm.view_name = this.viewList[0].view_name;
						this.getStageAll(this.viewList[0].id);
					} else {
						this.viewForm.id = '';
						this.viewForm.view_name = '';
						document.getElementById("mainIframe").src = "";
					}
				}
			}).catch(error => {
				console.log(error);

			});

		},

		//获取图纸函数
		getStageAll(id) {
			var that = this;
			this.drawList = [];
			this.$http({
				method: 'post',
				url: 'api/draw/all',
				data: {
					'view_id': id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					for (var i = 0, len = res.data.data.length; i < len; i++) {
						var draw = {
							value: res.data.data[i].id,
							label: res.data.data[i].draw_name
						}
						this.drawList.push(draw);
					}

					this.viewForm.stage_id = this.drawList[0].value;
					//this.showView=true;
					localStorage.setItem('stageId', that.viewForm.stage_id);
					//this.drawName=this.drawList[0].label;
					this.nowDraw = this.drawList[0].label;
					//this.refreshView();

				}
			}).catch(error => {
				console.log(error);
				this.drawList = [];

			});
		},

		//图纸下拉框改变事件
		changeViewStage(stage) {
			localStorage.setItem('stageId', stage);
		},

		//全屏时，点击图纸列表改变事件
		changeStage(item, event) {
			var that = this;
			if (event.target.innerText == item.label) {
				this.nowDraw = item.label;
			}
			this.viewForm.stage_id = item.value;
			//this.drawName=item.label;
			localStorage.setItem('stageId', that.viewForm.stage_id);
			//this.refreshView();
			setTimeout(function () {
				that.fullList = false;
			}, 5000)
		},

		changeInterval(interval) {
			if (Number(interval) < 30) {
				this.viewForm.interval = 30;
			} else if (Number(interval) > 600) {
				this.viewForm.interval = 600;
			}
		},

		swiperStage() {
			this.dialogSwiperVisible = true;
		},

		showTrunView(interval = 60) {
			var that = this
			this.isPlay = true;
			this.$message({
				type: 'info',
				message: '组态图纸正在轮播...'
			});
			this.isSwiper = true;
			let time = Number(interval) || 60;
			this.swiperTimer = setInterval(function () {
				that.viewForm.stage_id = that.drawList[that.start].value;
				localStorage.setItem("stageId", that.viewForm.stage_id);
				that.start++;
				if (that.start == that.drawList.length) {
					that.start = 0;
				}
			}, time * 1000);
			this.dialogSwiperVisible = false;
		},

		stopTrunView() {
			var that = this;
			this.isPlay = false;
			this.$message({
				type: 'info',
				message: '组态图纸轮播已停止'
			});
			clearInterval(that.swiperTimer);
			this.viewForm.stage_id = this.drawList[0].value;
			localStorage.setItem("stageId", that.viewForm.stage_id);
		},
		//以下是组态相关函数
		//图纸整体刷新
		refreshViewAndData() {
			var stageId = localStorage.getItem("stageId") ? localStorage.getItem("stageId") : this.viewForm.stage_id;
			document.getElementById("mainIframe").src = 'static/jyzt/client_view.html?stageId=' + stageId;
			//this.refreshView();
		},

		//只刷新组态数据的函数
		refreshViewData() {
			this.$http({
				method: 'post',
				url: 'api/draw/refresh',
				data: {
					'id': this.viewForm.stage_id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						type: 'info',
						message: '图纸数据已刷新'
					});
				}
			}).catch(error => {
				console.log(error);


			});
		},

		fullViewScreen() {
			var that = this;
			this.isFullViewscreen = !this.isFullViewscreen;
			if (this.isFullViewscreen) {
				that.$refs.mainIframe.removeAttribute("class", "mainIframe");
				that.$refs.mainIframe.style.position = "fixed";
				that.$refs.mainIframe.style.top = 0;
				that.$refs.mainIframe.style.left = 0;
				that.$refs.mainIframe.style.zIndex = 100;
				that.$refs.mainIframe.style.width = window.screen.width + 'px';
				that.$refs.mainIframe.style.height = window.screen.height + 'px';
				that.$refs.mainIframe.style.backgroundColor = "#0B1738";
				//that.refreshViewAndData();
			} else {
				that.fullList = false;
				that.$refs.mainIframe.setAttribute("class", "mainIframe");
				that.$refs.mainIframe.style.position = "relative";
				that.$refs.mainIframe.style.top = 0;
				that.$refs.mainIframe.style.left = 0;
				that.$refs.mainIframe.style.zIndex = 1;
				that.$refs.mainIframe.style.backgroundColor = "transparent";
				that.$refs.mainIframe.style.cssText += ";width:99%;height:calc(100% - 1.1rem);";
				//that.refreshViewAndData();
			}
		},

		addMarker(point, data) {
			var that = this;
			var status = "";
			if (data.is_on) {
				status = data.is_alarm ? '报警' : '正常';
			} else {
				status = '离线';
			}
			function initMarker(AwesomeMarker) {

				var marker = new AwesomeMarker({
					map: that.map,
					// icon: new AMap.Icon({
					// 	size: [12, 24],
					// 	imageSize: [12, 24],
					// 	image:data.stateIcon
					// }),
					awesomeIcon: status == "正常" ? 'check' : (status == "报警" ? 'exclamation-triangle' : 'close'),
					//iconTheme: 'default',
					//背景图标样式
					iconStyle: status == "正常" ? 'green' : (status == "报警" ? 'orange' : 'gray'),
					iconLabel: {
						style: {
							color: status == "正常" ? '#fff' : (status == "报警" ? 'red' : '#333'), //设置颜色
							fontSize: '18px'

						}
					},
					position: point,
					offset: new AMap.Pixel(-6, -22),
					label: {
						//content: data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
						//content: data.equip_name + '(' + status + ')',
						content: data.equip_name,
						offset: new AMap.Pixel(-4, -20),
						direction: "right"
					}
					//title:data.equip_name + "　所在项目:" + data.product_name + "　状态:"+status,
					//offset: new AMap.Pixel(-13,-32)
				});


				//清除点击事件弹出对话框之后，地图会跟随鼠标移动的问题；
				// marker.on("mousemove", function() {
				// 	event.stopPropagation();
				// 	event.preventDefault();
				// 	event.stopImmediatePropagation();
				// 	// marker.label = {
				// 	//     content: '设备' + status,
				// 	//     direction: "left"
				// 	// };
				// });
				marker.on("click", function () {
					that.getInfoAndAddress(data.id, false);
				});
				//setTimeout(function() {
				that.markers.push(marker);
				that.map.add(marker);
				//marker.setMap(that.map);
				//}, 500);
			}
			AMapUI.loadUI(['overlay/AwesomeMarker'], function (AwesomeMarker) {
				//启动页面
				initMarker(AwesomeMarker);
			});
		},

		addManyMarker() {
			var that = this;
			this.lostDevice = [];
			//this.points = [];
			if (this.equipdata.length) {
				for (let i = 0; i < this.equipdata.length; i++) {
					if (this.equipdata[i]) {
						if (
							this.equipdata[i].geo_coord &&
							Number(this.equipdata[i].geo_coord[0]) > 70 &&
							Number(this.equipdata[i].geo_coord[0]) < 140 &&
							Number(this.equipdata[i].geo_coord[1]) > 1 &&
							Number(this.equipdata[i].geo_coord[1]) < 60
						) {
							var point = [
								this.equipdata[i].geo_coord[0],
								this.equipdata[i].geo_coord[1]
							];
							//that.points.push(point);
							this.addMarker(point, this.equipdata[i]);
							// if (that.equipdata[i].is_on) {
							// 	if (that.equipdata[i].is_alarm == 1) {
							// 		//that.alarmDevice.push(that.equipdata[i].equip_name);
							// 		//that.myIcon = "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/offline.png";
							// 		that.myIcon =
							// 			"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/alarmOne.gif";
							// 		that.addMarker(point, that.equipdata[i]);
							// 	} else {
							// 		//that.myIcon = "../../static/online.png";
							// 		that.myIcon="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/online.png";
							// 		that.addMarker(point, that.equipdata[i]);
							// 	}
							// } else {
							// 	//that.myIcon = "../../static/offline.png";
							// 	that.myIcon="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/down.png";
							// 	that.addMarker(point, that.equipdata[i]);
							// }
						} else {
							if (this.equipdata[i].type != 3) {
								this.lostDevice.push(that.equipdata[i].equip_name);
							}
						}
					}
				}
				if (this.lostDevice[0]) {
					//如果不延时，将于上面的数据点报警产生重叠
					setTimeout(function () {
						that.$notify({
							title: "设备定位报警提示:",
							dangerouslyUseHTMLString: true,
							message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">以下设备(共' +
								that.lostDevice.length +
								'台)，坐标异常，未在地图上标注，请查看位置!</br><span style="color:red;">' +
								that.lostDevice.join("</br>") +
								"</span></div>",
							duration: 6000,
							position: 'bottom-left',
							offset: 10
						});
					}, 1000);
				}
			} else {
				this.$message({
					message: "暂时没有可以标注的设备!",
					type: "warn",
					offset: 300,
					center: true
				});
				this.map.setZoomAndCenter(5, "西安");
			}
		},
		showMap() {
			var that = this;
			this.map = new AMap.Map("map", {
				resizeEnable: true,
				expandZoomRange: true,
				enableHighAccuracy: true
				//下面为图层设置
				//layers: [new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()]
			});
			//设置地图主题颜色
			//可选的值有：normal(默认),dark,light,whitesmoke,fresh,grey,graffiti,macaron,blue,darkblue,wine；
			var styleName = "amap://styles/grey";
			this.map.setMapStyle(styleName);
			//设置主题结束
			AMap.plugin(["AMap.Scale"], function () {
				// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
				//that.map.addControl(new AMap.ToolBar());

				// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
				that.map.addControl(new AMap.Scale());

				// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
				//map.addControl(new AMap.OverView({isOpen:true}));

				// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
				//that.map.addControl(new AMap.MapType());

				// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
				// map.addControl(new AMap.Geolocation());
			});
			this.addManyMarker();
			setTimeout(function () {
				that.map.setFitView();
			}, 1000);
		},

		getWaterLine() {
			var that = this;
			var chart2 = this.$refs.waterBar;
			this.chartTwo = echarts.init(chart2);
			//this.option_bar.xAxis.data = Array.from(timeArray);
			//this.option_bar.series[0].data = Array.from(alarmCount);
			this.chartTwo.setOption(that.water_option);

			//that.loading = false;
			window.addEventListener("resize", () => {
				this.chartTwo.resize();
			})
		},

		getWeekUser() {
			var that = this;
			var chart2 = this.$refs.echartBar;
			this.chartTwo = echarts.init(chart2);
			//this.option_bar.xAxis.data = Array.from(timeArray);
			//this.option_bar.series[0].data = Array.from(alarmCount);
			this.chartTwo.setOption(that.option_bar);

			//that.loading = false;
			window.addEventListener("resize", () => {
				this.chartTwo.resize();
			})
		},

		// getWeekAlarm(id) {
		// 	var that = this;
		// 	var timeArray = [];
		// 	var alarmCount = [];
		// 	this.option_bar.xAxis.data = [];
		// 	this.option_bar.series[0].data = [];
		// 	this.$http({
		// 			method: "post",
		// 			url: "api/index/recentAlarmCount",
		// 			data: {
		// 				"product_id": id
		// 			},
		// 		})
		// 		.then((res) => {
		// 			if (res && res.data.result == "success") {
		// 				if (res.data.data.length) {
		// 					//for (let i = 0, len = res.data.data.length; i < len; i++) {
		// 					//最近一周，所以可以写死
		// 					for (let i = 0; i < 7; i++) {
		// 						timeArray.push(res.data.data[i].date);
		// 						alarmCount.push(res.data.data[i].count);
		// 						//以下为测试数据
		// 						//alarmCount = [11, 26, 3, 21, 18, 31, 5];
		// 					}
		// 					//console.log(alarmCount);
		// 					//报警统计柱状图
		// 					var chart2 = this.$refs.echartBar;
		// 					this.chartTwo = echarts.init(chart2);
		// 					this.option_bar.xAxis.data = Array.from(timeArray);
		// 					this.option_bar.series[0].data = Array.from(alarmCount);
		// 					this.chartTwo.setOption(that.option_bar);

		// 					//that.loading = false;
		// 					window.addEventListener("resize", () => {
		// 						this.chartTwo.resize();
		// 					})
		// 				} else {

		// 				}
		// 			}
		// 		})
		// 		.catch((error) => {
		// 			console.log(error);
		// 		});
		// },

		//该函数用于不断更新一周报警的当天数量
		refreshWeekAlarm(id) {
			var that = this;
			var timeArray = [];
			var alarmCount = [];
			this.$http({
				method: "post",
				url: "api/index/recentAlarmCount",
				data: {
					"product_id": id
				},
			})
				.then((res) => {
					if (res && res.data.result == "success") {
						if (res.data.data.length && res.data.data[6]) {
							for (let i = 0; i < 7; i++) {
								//有可能跨天，所以要带上时间
								timeArray.push(res.data.data[i].date);
								alarmCount.push(res.data.data[i].count);
							}
							this.option_bar.xAxis.data = Array.from(timeArray);
							this.option_bar.series[0].data = Array.from(alarmCount);
							this.chartTwo.setOption(that.option_bar);
						}
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},

		//获取最新报警数据函数
		getNewAlarm: function (num = 1, size = 5) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/alarm/lists',
				data: {
					"limit": size,
					"page": num
				}
			}).then(res => {
				//console.log(that.$parent.yktoken)
				if (res && res.data.result == "success") {
					this.newAlarmData = res.data.data;

				}
			}).catch(error => {
				console.log(error);
				this.newAlarmData = [];
			});
		},

		bigScreen() {
			var that = this;
			//this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
			var content = this.$refs.page;
			//如果使用上面这一句，全屏后无法正常使用下拉框；
			//var content = document.documentElement;
			if (!this.isFullscreen) { //进入全屏,多重短路表达式
				(content.requestFullscreen && content.requestFullscreen()) ||
					(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
					(content.webkitRequestFullscreen && content.webkitRequestFullscreen()) || (content
						.msRequestFullscreen &&
						content.msRequestFullscreen());
				this.isFullscreen = true;
				setTimeout(function () {
					that.$refs.page.style.height = window.screen.height + 'px';
				}, 1000)

			} else {
				document.exitFullscreen ? document.exitFullscreen() :
					document.mozCancelFullScreen ? document.mozCancelFullScreen() :
						document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
				this.isFullscreen = false;
			}
		},

		keepSameScreen() {
			var that = this;
			if (this.isFullscreen) {
				setTimeout(function () {
					that.$refs.page.style.cssText += ";height:" + window.screen.height + "px!important";
				}, 1000)
			} else {
				setTimeout(function () {
					that.$refs.page.style.cssText += ";height:" + window.innerHeight + "px!important";
				}, 1000)
			}
		},

		goMainData() {
			// if (this.isFullscreen || this.mapFullscreen || this.isFullViewscreen) {
			// 	document.exitFullscreen ? document.exitFullscreen() :
			// 		document.mozCancelFullScreen ? document.mozCancelFullScreen() :
			// 		document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
			// 	this.isFullscreen = false;
			// 	this.mapFullscreen = false;
			// 	this.isFullViewscreen = false;
			// }
			//if(this.grade<3){
			this.$router.push({
				path: '/showData',
				name: 'showData',
				component: 'showData'
			})
			// }else{
			// 	this.$router.push({
			// 		path: '/showDataThree',
			// 		name: 'showDataThree',
			// 		component: 'showDataThree'
			// 	})
			// }
		},

		changeVal(item, type) {
			var that = this;
			this.$prompt('您正在改写' + '<span style="color:red;">' + item.sensor_name + '</span>' + '的值,请慎重操作!', '写值操作', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: item.show_type == 2 ? /^-{0,1}\d+(\.\d+)?$/ : '',
				dangerouslyUseHTMLString: true,
				inputPlaceholder: item.value,
				inputErrorMessage: item.show_type == 2 ? '设值错误，值必须为数字！' : ''
			}).then(({
				value
			}) => {
				if (item.show_type == 2 && (value === '' || value === null)) {
					this.$message({
						type: 'error',
						offset: 300,
						message: '数值型修改值不能为空！',
						center: true
					});
					return false;
				}
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": item.id,
						"value": value

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						item.value = value;
						that.$message({
							message: '恭喜,写入数据点成功!',
							type: 'success',
							center: true
						});
					}
					// console.log(that.pointdata[0].icon)
				}).catch(error => {
					console.log(error);
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消设值!'
				});

			});
		},

		changeState(item, type) {
			var that = this;
			var state = "";
			state = item.value == 1 ? '打开' : '关闭';
			var newValue = state == '打开' ? 1 : 0;
			this.$confirm('您确定要' + state + '当前开关吗？' + state + '后,将无法撤销,是否确认?', state + item.sensor_name, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					method: 'post',
					url: 'api/sensor/write',
					data: {
						"id": item.id,
						"value": newValue

					}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,修改数据点状态成功!',
							type: 'success',
							center: true
						});
					} else {
						this.refreshFun(1000, item, type);
					}

				}).catch(error => {
					console.log(error)
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消修改,将自动恢复！'
				});
				this.refreshFun(1000, item, type);
			});


		},
		//读写状态改值
		changeState2(item, type) {
			this.dialogFormVisible = true;
			this.sateForm.sensor_name = item.sensor_name;
			this.sateForm.id = item.id;
			this.sateForm.equip_id = item.equip_id;
			this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
			this.sateForm.type = type;
		},
		//读写报警改值
		changeState3(item, type) {
			this.dialogFormVisible_2 = true;
			this.sateForm.sensor_name = item.sensor_name;
			this.sateForm.id = item.id;
			this.sateForm.equip_id = item.equip_id;
			this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
			this.sateForm.type = type;
		},
		//读写多位开关改值
		changeState4(item, type) {
			if (item.read_write == 2) {
				event.preventDefault();
				this.dialogFormVisible_4 = true;
				this.sateForm.type = type;
				this.sateForm.sensor_name = item.sensor_name;
				this.sateForm.id = item.id;
				this.sateForm.equip_id = item.equip_id;
				this.sateForm.slave_id = item.slave_id ? item.slave_id : 0;
				this.sateForm.value = item.value;
				this.sateForm.ext_vars = item.ext_vars;
				//this.keyLen=Object.keys(item.ext_vars).length;
				this.threeSW = item.ext_vars[this.sateForm.value];
			} else {
				this.$message({
					type: 'info',
					duration: 2000,
					message: '只读类型，不可操作!'
				});
			}
		},

		letOneToZero() {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/sensor/write',
				data: {
					"id": this.sateForm.id,
					"value": 1

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.setStateVal(0);
				}
			}).catch(error => {
				console.log(error)
			});

		},

		letZeroToOne() {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/sensor/write',
				data: {
					"id": this.sateForm.id,
					"value": 0

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.setStateVal(1);
				}
			}).catch(error => {
				console.log(error)
			});

		},

		setStateVal(val) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/sensor/write',
				data: {
					"id": this.sateForm.id,
					"value": val

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (this.dialogFormVisible) {
						this.$message({
							message: '恭喜,修改状态成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible = false;
					} else if (this.dialogFormVisible_2) {
						this.$message({
							message: '恭喜,清除报警成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible_2 = false;
					} else if (this.dialogFormVisible_3) {
						this.$message({
							message: '恭喜,开关操作成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible_3 = false;
					} else if (this.dialogFormVisible_4) {
						this.$message({
							message: '恭喜,多位开关操作成功!',
							type: 'success',
							center: true
						});
						this.dialogFormVisible_4 = false;
					}
				} else {
					this.refreshFun(1000, this.sateForm, this.sateForm.type);
				}
				this.dialogFormVisible_4 = false;
				this.dialogFormVisible_3 = false;
				this.dialogFormVisible_2 = false;
				this.dialogFormVisible = false;
			}).catch(error => {
				console.log(error)
			});

		},
		getNowFormatDate() { //获取当前年月日
			var date = new Date();
			var seperator1 = "-";
			// var seperator2 = ":";
			var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

			return currentdate;
		},

		goExit() {
			var that = this;
			if (this.isFullscreen || this.mapFullscreen || this.isFullViewscreen) {
				document.exitFullscreen ? document.exitFullscreen() :
					document.mozCancelFullScreen ? document.mozCancelFullScreen() :
						document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
				this.isFullscreen = false;
				this.mapFullscreen = false;
				this.isFullViewscreen = false;
			}
			console.log(this.fromPage);
			//解决组态时无法退出的问题；
			if (this.fromPage == "mainData" || this.fromPage == "Login" || this.fromPage == "showData" || !this.fromPage) {
				this.$router.push({
					path: '/device',
					name: 'device',
					component: 'device'
				})
				localStorage.setItem("indexPath", '7-1');
			} else if (this.fromPage == "showScreenMap") {
				this.$router.go(-1);
			} else {
				this.$router.push({
					path: '/' + that.fromPage,
					name: that.fromPage,
					component: that.fromPage
				})
				localStorage.setItem("indexPath", this.fromOrder);

			}




		},

		getInfoAndAddress(id, center = true) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/info',
				data: {
					"id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					var data = res.data.data;
					var zIndex = res.data.data.geo_coord;
					var tong =
						`<div id="waterBox" style="width:400px;height:auto;position:relative;background-color:rgba(0,0,0,0.5)">
							<div
							style="width:100%;
							position:relative;
							color:white;
							text-align:left;
							height:auto;
							padding:0;
							line-height:26px;">
							<div
								style="font-size:16px;width:100%;
								overflow:hidden;
								white-space: nowrap;
			                    text-overflow: ellipsis;">
								    <span>设备名称：</span><span style="display:inline-block;" id="device" title="">` +
						data.equip_name +
						`<span>
								</div>
								<div
								style="font-size:16px;width:100%;"><span>设备编码：</span><span style="display:inline-block;" id="code" title="">` +
						data.equip_code +
						`</span></div>
								<div style="font-size:16px;width:100%;"><span>所属项目：</span><span style="display:inline-block;" id="project">` +
						data.product_name + `</span></div>
							    <div style="font-size:16px;width:100%;max-height:53px;line-height:26px;white-space: wrap;">设备地址：` +
						data.geo_name + `</div>
								<div style="font-size:16px;width:100%;"><span>最后数据上报时间：</span><span style="display:inline-block;" id="project">` +
						data.last_data_time + `</span></div>
							<div>
						</div>`;

					that.infoWindow = new AMap.InfoWindow({
						offset: new AMap.Pixel(0, -20),
						content: tong
					});
					that.infoWindow.open(that.map, zIndex);
					if (center) {
						that.map.setCenter(zIndex);
						that.map.setZoom(20);
					}
				}
			}).catch(error => {
				console.log(error)
			});

		},

		getSensors(id) {
			var that = this;
			this.Socket = new WebSocket(this.wsUrl);
			if (this.Socket.readyState != WebSocket.OPEN) {
				this.Socket.onopen = function () {
					var pingData = {
						action: "ping",
						data: {
							user_id: localStorage.getItem('userId'),
							equip_id: id,
							token: localStorage.getItem("yktoken")
						}
					};

					that.Socket.send(JSON.stringify(pingData));
					that.refreshOneDeviceData(id, 1);
					that.timer = setInterval(function () {
						that.Socket.send(JSON.stringify(pingData));
					}, 30000);

					console.log('连接成功')
				};
			};
			this.Socket.onerror = this.onError;
			this.Socket.onmessage = this.onMessage;
		},


		getView(id) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/view',
				data: {
					"id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					//console.log(res.data.data);
					this.oneEquipData = res.data.data;
				}
			}).catch(error => {
				console.log(error);

			});
		},
		changeDataType() {

		},

		refreshOneDeviceData(id, type = 1, isButton = false) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/refresh',
				data: {
					"id": id,
					"mode": type == 1 ? 'real' : 'vars'
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (isButton) {
						this.$message({
							message: '此设备数据已刷新!',
							type: 'info',
							duration: 2000,
							offset: 350,
							center: true
						});
					} else {
						console.log("数据刷新成功");
					}
				}
			}).catch(error => {

				console.log(error)
			});
		},

		refreshOneSlaveData(id, slave, type) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/equip/refresh',
				data: {
					"id": id,
					"slave_id": slave,
					"mode": type == 1 ? 'real' : 'vars'
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					console.log("数据刷新成功")
				}
			}).catch(error => {

				console.log(error)
			});
		},

		changeOption(option, type) {
			var that = this;
			//this.box='live';
			this.equipdata = [];
			this.alarmEquips = [];
			this.viewList = [];
			this.drawList = [];
			this.viewForm.view_name = '';
			this.viewForm.stage_id = '';
			this.$notify.closeAll();
			//this.sendSensors=[];
			//this.varSensors=[];
			clearInterval(that.timer)
			if (this.Socket) {
				this.Socket.close();
			}
			if (option == 0) {
				this.platformTotal();
			} else {
				this.productTotal(option);
			}

			this.getWeekAlarm(option);
			if (type != 'view') {
				this.getEquip(option);
				//this.getEquipAll(option);
			} else {
				this.getViewAll(option)
			}
		},

		changeContent(type) {
			var that = this;
			if (this.Socket) {
				this.Socket.close();
				clearInterval(that.timer);
			}
			if (type != 'map') {
				clearInterval(that.allAlarmTimer);
				if (this.alarmSocket) {
					this.alarmSocket.close();
					this.alarmSocket.onerror = null;
				}
				this.options[0].disabled = true;
				if (this.form.option == 0) {
					this.form.option = this.options[1].value;
				}
				if (type == 'data') {
					this.getEquip(this.form.option);
					//this.getEquipAll(this.form.option);
				} else {
					this.viewList = [];
					this.drawList = [];
					this.getViewAll(this.form.option);
				}
			} else {
				this.options[0].disabled = false;
				//this.form.option = this.options[0].value;
				this.getEquip(this.form.option);
				this.getAllAlarm();
				//this.getEquipAll(this.form.option);
			}

		},

		refreshFun(second = 1000, item, type = 1) {
			var that = this;
			setTimeout(function () {
				if (item.slave_id) {
					that.refreshOneSlaveData(item.equip_id, item.slave_id, type);
				} else {
					that.refreshOneDeviceData(item.equip_id, type);
				}
			}, second);
		},

		onError(e) {
			var that = this;
			console.log("连接失败，尝试重连")
			this.Socket.close();
			clearInterval(that.timer);
			this.getSensors(this.oneDeviceForm.id);
		},

		isObject(obj) {
			return obj.constructor.toString().indexOf("Object") > -1;
		},

		onMessage(msg) {
			var that = this;
			var messageData = JSON.parse(msg.data);
			if (messageData.result == "success" && this.isObject(messageData.data)) {
				var liveDatas = messageData.data;
				if (liveDatas.equip) {
					this.equipdata[this.oneDeviceForm.index].is_on = liveDatas.equip.is_on;
					this.equipdata[this.oneDeviceForm.index].is_alarm = liveDatas.equip.is_alarm;
					//this.oneEquipData.is_on = liveDatas.equip.is_on;
					//this.oneEquipData.is_alarm = liveDatas.equip.is_alarm;
					//this.oneEquipData.last_data_time = liveDatas.equip.last_data_time;
					if (liveDatas.equip.is_on == 0) {
						that.$notify({
							title: '警告',
							message: '设备:' + that.oneEquipData.equip_name + '连接中断,若为设备重启将马上恢复,否则请检查设备连接!',
							type: 'warning',
							duration: 6000,
							offset: 150
						});
						//若设备突然中断离线，清空正在显示的数值；
						if (that.oneEquipData.type == 1) {
							for (let n = 0, len = that.oneEquipData.groups.length; n < len; n++) {
								for (let m = 0, len2 = that.oneEquipData.groups[n].sensors.real.length; m <
									len2; m++) {
									that.oneEquipData.groups[n].sensors.real[m].value = '';
								}
								for (let m = 0, len2 = that.oneEquipData.groups[n].sensors.vars.length; m <
									len2; m++) {
									that.oneEquipData.groups[n].sensors.vars[m].value = '';
								}

							}
						} else {
							for (let n = 0, len = that.oneEquipData.sensors.real.length; n < len; n++) {
								that.oneEquipData.sensors.real[n].value = '';
							}
							for (let n = 0, len = that.oneEquipData.sensors.vars.length; n < len; n++) {
								that.oneEquipData.sensors.vars[n].value = '';
							}
						}
					}
				}
				if (liveDatas.data && liveDatas.equip) {
					//console.log(that.oneEquipData.type);
					if (that.chart == "live" && (liveDatas.data[that.poid] != undefined) && (liveDatas.data[that
						.poid] != null)) {
						that.live_option.series[0].data.push(liveDatas.data[that.poid]);
						that.live_option.xAxis.data.push(liveDatas.time.substr(5, 5) + "\n" + liveDatas.time.substr(
							11));
						if ((that.live_option.series[0].data != []) && (that.live_option.xAxis.data != [])) {
							var chart_2 = that.$refs.myChartLive;
							var myChartLive = echarts.init(chart_2);
							// myChartLive.setOption(that.live_option);
							myChartLive.setOption(that.live_option);
							that.loading_2 = false;
							window.addEventListener("resize", () => {
								myChartLive.resize();
							})
						} else {
							that.lineout = "live";
						}
					}
					if (that.oneEquipData.type == 1) {
						//console.log('a');
						for (let n = 0, len = that.oneEquipData.groups.length; n < len; n++) {
							for (let m = 0, len2 = that.oneEquipData.groups[n].sensors.real.length; m < len2; m++) {
								for (let key in liveDatas.data) {
									if (that.oneEquipData.groups[n].sensors.real[m].id == key) {
										that.oneEquipData.groups[n].sensors.real[m].value = liveDatas.data[key];
										//console.log(that.oneEquipData.slaves[n].sensors.real[m].value);
									}

								}

							}
							if (that.oneEquipData.groups[n].sensors.vars && (that.oneEquipData.groups[n].sensors.vars
								.length)) {
								for (let m = 0, len2 = that.oneEquipData.groups[n].sensors.vars.length; m <
									len2; m++) {
									for (let key in liveDatas.data) {
										if (that.oneEquipData.groups[n].sensors.vars[m].id == key) {
											that.oneEquipData.groups[n].sensors.vars[m].value = liveDatas.data[key];
										}

									}

								}
							}
						}
					} else {
						for (let n = 0, len = that.oneEquipData.sensors.real.length; n < len; n++) {
							for (let key in liveDatas.data) {
								if (that.oneEquipData.sensors.real[n].id == key) {
									that.oneEquipData.sensors.real[n].value = liveDatas.data[key];
								}

							}
						}
						if (that.oneEquipData.sensors.vars && (that.oneEquipData.sensors.vars.length)) {
							for (let n = 0, len = that.oneEquipData.sensors.vars.length; n < len; n++) {
								for (let key in liveDatas.data) {
									if (that.oneEquipData.sensors.vars[n].id == key) {
										that.oneEquipData.sensors.vars[n].value = liveDatas.data[key];
									}
								}
							}
						}
					}
				}
			} else {
				console.log(messageData.message);
			}
		},

		onClose(e) {
			this.Socket.close();
			console.log('连接关闭')
		},

		changeBox(event) {
			var that = this;
			if (event.target.id) {
				this.chart = event.target.id;
				switch (this.chart) {
					case 'live':
						this.roundLineLive(this.chartItem, this.chartItem.equip_type);
						break;
					case 'story':
						this.roundLineHis(this.chartItem);
						break;

				}
			}
		},

		roundLineHis(item) {
			var that = this;
			//this.form.value = [that.getNowFormatDate(), that.getNowFormatDate()];
			this.loading_1 = true;
			var hisXdata = [];
			var hisYdata = [];
			this.$http({
				method: 'post',
				url: 'api/sensor/graph',
				data: {
					"id": item.id,
					"date_range": that.form.value.join('~')

				}
			}).then(res => {
				if (res && res.data.result == "success") {
					if (res.data.data !== []) {
						for (var i = 0; i < res.data.data.length; i++) {

							var tim = res.data.data[i].time.substr(5, 5) + "\n" + res.data.data[i].time.substr(
								11);
							var val = res.data.data[i].value;
							//因为值有可能0,所以这样判断
							if (tim && val !== null && val !== undefined && val !== '') {
								hisXdata.push(tim); //如果用unshift,将无法显示
								hisYdata.push(val);

							}
						}
						that.ch_option.xAxis.data = hisXdata.reverse();
						that.ch_option.series[0].data = hisYdata.reverse();
						that.ch_option.series[0].name = item.sensor_name;
						var chart = window.document.getElementById('myChart');
						//var myChart = echarts.init(chart,'dark');//'dark'表示深色模式,深色背景
						var myChart = echarts.init(chart);
						myChart.setOption(that.ch_option);
						window.addEventListener("resize", () => {
							myChart.resize();
						})
						that.loading_1 = false;
					} else {
						that.lineout = 'story';
					}
				}
				// console.log(that.pointdata[0].icon)
			}).catch(error => {
				console.log(error)
			});
		},

		changeChart(val) {
			this.roundLineHis(this.chartItem);
		},
		roundLineLive(item, equipType) {
			var that = this;
			this.innerVisible = true;
			this.chart = "live";
			this.lineout = "";
			this.loading_2 = true;
			this.chartItem = Object.assign({
				'equip_type': equipType
			}, item);
			this.live_option.series[0].data = [];
			this.live_option.series[0].label.formatter = "{c}" + item.unit;
			this.live_option.xAxis.data = [];
			this.sensorSave = item.save_type;
			//this.livetimes = []; //进来之前先清空上次的数据
			//this.livedata = []; //不然会数据混连
			if (equipType == 1) {
				this.refreshOneSlaveData(item.equip_id, item.slave_id, 1);
			} else {
				this.refreshOneDeviceData(item.equip_id, 1);
			}
			this.nowSensor = item.sensor_name;
			this.which = item.save_type == 2 ? "实时曲线" : "曲线图";
			this.poid = item.id;
			this.live_option.series[0].name = item.sensor_name;
		},

		closeLine() {
			this.innerVisible = false;
			this.poid = 0;
			this.chart = "";

		}
	},

	beforeDestroy() {
		this.$message.closeAll();
		// if (this.isFullscreen || this.mapFullscreen || this.isFullViewscreen) {
		// 	document.exitFullscreen ? document.exitFullscreen() :
		// 		document.mozCancelFullScreen ? document.mozCancelFullScreen() :
		// 		document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
		// 	this.isFullscreen = false;
		// 	this.mapFullscreen = false;
		// 	this.isFullViewscreen = false;
		// }

	},

	destroyed() {
		var that = this;
		// clearInterval(that.timer);
		// clearInterval(that.swiperTimer);
		// clearInterval(that.nowTimer);
		// clearInterval(that.weaTimer);
		// //clearInterval(that.alarmTimer);
		// clearInterval(that.tokenTimer);
		// clearInterval(that.allAlarmTimer);
		// if (this.Socket) {
		// 	this.Socket.close();
		// 	this.Socket.onerror=null;
		// }
		// if(this.alarmSocket){
		// 	this.alarmSocket.close();
		// 	this.alarmSocket.onerror=null;
		// }

	}
}
</script>

<style scoped>
@import url("../assets/dataScreen.css");
</style>

<style scoped>
@media all and (min-width:2560px) {
	.turn {
		float: left !important;
		transform: translate(-0.4rem, -0.1rem) !important;
	}

	.main_left,
	.main_center,
	.main_right {
		height: 1346px !important;
	}

	.main_left,
	.main_right {
		width: 19% !important;
	}

	.main_center {
		width: 61% !important;
	}

	/* .device_list{
			height:88%!important;
		} */

	.alarm_list {
		height: 94.5% !important;
	}

	.alarm_info {
		font-size: 0.3rem !important;
	}

	.itembox {
		min-width: 5.4rem !important;
		max-width: 6.2rem !important;
	}

	.valuebox {
		min-width: 4.7rem !important;
		max-width: 5.2rem !important;
	}

	.big>>>.el-input__inner {
		font-size: 18px !important;
	}

	.big>>>.el-range-input {
		font-size: 18px !important;
	}
}

@media all and (max-width:1920px) {

	.main_left,
	.main_center,
	.main_right {
		height: 986px !important;
	}

	.main_left,
	.main_right {
		width: 22% !important;
	}

	.main_center {
		width: 100% !important;
	}

	/* .device_list{
			height:84%!important;
		} */

	.alarm_list {
		height: 92.5% !important;
		/* border:1px solid red; */
	}

	.alarm_info {
		font-size: 0.25rem !important;
	}

	.itembox {
		min-width: 5.8rem !important;
		max-width: 7.4rem !important;
	}

	.valuebox {
		min-width: 4.6rem !important;
		max-width: 6rem !important;
	}

	.big>>>.el-input__inner {
		font-size: 16px !important;
	}

	.big>>>.el-range-input {
		font-size: 16px !important;
	}
}

@media all and (max-width:1600px) {

	.main_left,
	.main_center,
	.main_right {
		height: 824px !important;
	}

	.big>>>.el-input__inner {
		font-size: 12px !important;
	}

	.big>>>.el-range-input {
		font-size: 12px !important;
	}

	.nameLine {
		font-size: 0.2rem !important;
	}

	.turn {
		float: left !important;
		transform: translate(-0.6rem, -0.2rem) !important;
	}

	.roundline .el-radio-button__inner {
		vertical-align: top !important;
	}

	.roundline .el-radio-group {
		vertical-align: top !important;
	}

	#searchform {
		margin-top: 0.1rem !important;
	}

	.inpu {
		width: 5.5rem !important;
		vertical-align: top !important;
		margin-top: 0.2rem !important;
	}

	.chartTime {
		left: 60% !important;
		line-height: 1.6rem !important;
	}

	.btn {
		width: 1.5rem !important;
	}

	.itembox_6>>>.el-radio__label {
		font-size: 10px !important;
		padding-left: 2px !important;
	}

	.itembox_6>>>.el-radio__inner {
		width: 10px !important;
		height: 10px !important;
	}

	.rad+.rad {
		margin-left: 0.1rem !important;
	}
}

@media all and (max-width:1366px) {

	.main_left,
	.main_center,
	.main_right {
		height: 706px !important;
	}

	.read,
	.write {
		width: 2.4rem !important;
	}

	.turn {
		float: left !important;
		transform: translate(-0.9rem, -0.2rem) !important;
	}
}

@media all and (max-width:1280px) {

	.main_left,
	.main_center,
	.main_right {
		height: 582px !important;
	}

	.big {
		margin-top: -6px !important;
	}

	.optionBox {
		height: 0.8rem !important;
		line-height: 0.8rem !important;


	}

	.optionBox>>>.el-input__inner {
		height: 0.7rem !important;
		line-height: 0.7rem !important;
		font-size: 0.3rem !important;


	}

	.view_1360 {
		margin-top: -4px !important;
	}

	.oneOption {
		height: 0.6rem !important;
		line-height: 0.6rem !important;
		font-size: 0.3rem !important;
	}

	.itembox {
		min-width: 5.6rem !important;
		max-width: 7.6rem !important;
	}

	.valuebox {
		min-width: 4.1rem !important;
		max-width: 6.2rem !important;
		overflow: hidden !important;
	}

	.turn {
		float: left !important;
		transform: translate(-1.1rem, -0.2rem) !important;
	}

	#isfull::-webkit-scrollbar,
	.mainIframe::-webkit-scrollbar {
		display: block !important;
		/* Chrome Safari */
	}
}

* {
	margin: 0;
	padding: 0;
	color: white;
	background-color: transparent;
	box-sizing: border-box;
}

.big>>>.el-table__empty-block {
	/*在内部改变element-ui默认样式的方式*/
	/* background-color: #0b2c51; */
}

.big>>>.el-popper[x-placement^=bottom] {
	margin-top: 8px;
	background-color: red !important;
}

.dial>>>.el-dialog__body {
	/*曲线对话框的背景色*/
	background: -webkit-linear-gradient(to bottom, #0b2c51 20%, #000 100%);
	background: -moz-linear-gradient(to bottom, #0b2c51 20%, #000 100%);
	background: -ms-linear-gradient(to bottom, #0b2c51 20%, #000 100%);
	background: -o-linear-gradient(to bottom, #0b2c51 20%, #000 100%);
	background: linear-gradient(to bottom, #0b2c51 20%, #000 100%);
	/* background-color: #0b2c51; */
	padding: 10px;
}

.dial>>>.el-dialog__header {
	position: relative;
	z-index: 99;
	width: 90%;
	height: 0.8rem;
	background-color: transparent !important;
}

.itembox_6>>>.el-radio__label {
	color: #fff;
	font-size: 12px;
	padding-left: 4px;
}

.itembox>>>.el-radio__label {
	color: #fff;
	font-size: 12px;
	padding-left: 4px;
}

.itembox_6>>>.el-radio {
	margin-right: 0;
}

.itembox>>>.el-radio {
	margin-right: 0;
}

.page {
	background-color: #18182f !important;
	width: 100vw;
	height: 100vh;
	transition: all 1s linear;
	padding: 0;
	margin: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	font-family: "SourceHanSansCN-Normal";
	/* border:1px solid green; */
	overflow: hidden;
	/* overflow-y: visible;
		overflow-x: hidden; */
}

.main {
	width: 100%;
	height: auto;
	position: absolute;
	/* display:flex;
		justify-content:space-between; */
	left: 0;
	top: 1.5rem;
	z-index: 1;
	padding: 0 0.1rem;
	/* border:1px solid #fff; */
	/* margin-top: 0.2rem; */
}

.main_left {
	/* float: left; */
	position: absolute;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 0.1rem;
	width: 22%;
	height: 986px;
	z-index: 10;
	left: 0.2rem;
	background-color: transparent;
	/* border: 1px solid red; */
}

.main_left_top {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	height: 33%;
	/* padding: 0.5rem 0.4rem 0.2rem 0.4rem; */
	/* padding:0.4rem; */
	background: url('../../static/borderBack.png') no-repeat;
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0.5);


	/* background-color:rgba(0,0,0,0.6);
	    box-shadow: 0 0 20px inset #1b3589; */
	/* border: 1px solid #ccc; */
}

/* .productTotal,
	.userTotal,
	.deviceTotal,
	.viewTotal {
		width: 35%;
		height: 30%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		line-height: ;
		font-size: 0.5rem;
		border-radius: 6px;
		background: url('../../static/rectNew2.png') no-repeat;
		background-size: 100% 100%;
	}


	.deviceTotal,
	.viewTotal {
		margin-top: 0.2rem;
	} */

/* .nameProduct,
	.nameUser,
	.nameDevice,
	.nameView {
		width: 35%;
		height: auto;
		line-height: 0.6rem;
		text-align: center;
		font-size: 0.35rem;

	} */

/* .oneDeviceName {
		display: inline-block;
		text-align: left;
		float: left;
		height: 1rem;
		line-height: 1rem;

		width: auto;

		font-size: 0.34rem;
		color: deepskyblue;
		font-weight: 900;
		text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8) !important;
	} */

/* .pointName {
		color: deepskyblue;
		font-size: 0.4rem;
		margin-right: 0.1rem;
		vertical-align: middle;
	} */

.pie_title {
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	text-align: left;
	padding-left: 0.3rem;
	font-weight: 600;
	font-size: 0.35rem;

	/* border:1px solid red; */
}

.pie_title img {
	vertical-align: middle;
	margin-right: 0.1rem;
	width: 0.5rem;
	height: 0.5rem;
}

.pie_title>span,
.alarm_head>span {
	color: deepskyblue;
	/* color:#2984FF; */
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8) !important;
}

.bigWord {
	margin-left: 0.1rem;
	font-size: 0.4rem;
	font-weight: 700;
}

#echartPie {
	float: right;
	width: 59%;
	height: 78%;
	margin-top: 0.1rem;
	/* border: 1px solid blue; */
}

#devInfo {
	float: left;
	margin-top: 0.2rem;
	width: 40%;
	color: #111;
	font-size: 0.35rem;
	font-weight: 600;
	padding: 0.3rem 0 0.5rem 0.3rem;
	text-align: left;
	line-height: 0.9rem;
	height: 78%;
	/* border: 1px solid purple; */
}

.main_left_middle {
	width: 100%;
	position: relative;

	/* position: absolute;
		bottom: 0; */
	height: 33%;
	/* border: 1px solid #ccc; */
	/* padding: 0.2rem; */
	/* #18182f */

	background: url('../../static/borderBack.png') no-repeat;
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* background-color:rgba(0,0,0,0.6);
		box-shadow: 0 0 20px inset #1b3589; */
}

.main_left_bottom {
	width: 100%;
	position: relative;
	/* position: absolute;
		bottom: 0; */
	height: 33%;
	/* border: 1px solid #ccc; */
	/* padding: 0.2rem; */

	background: url('../../static/borderBack.png') no-repeat;
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* background-color:rgba(0,0,0,0.6);
		box-shadow: 0 0 20px inset #1b3589; */
}

/* .radio+.radio {
		margin-left: 0.6rem;
	} */
.radio /deep/ .el-radio__label {
	padding-left: 4px !important;
	font-size: 0.3rem;
	color: #fff;
}

.radio /deep/ .is-checked .el-radio__label {
	color: #409eff;
}

/* .device_list {
		width: 100%;
		height: 84%;
		overflow: auto;
		margin-top: 0.2rem;
		padding-top: 0.1rem;
		background-color: #152143;
		-ms-overflow-style: none;

		scrollbar-width: none;

		overflow-style: none;

	}

	.device_list::-webkit-scrollbar {
		display: none;

	} */

/* .oneDevice {
		padding: 0.1rem 0 0 0.4rem;

		text-align: left;
		width: 98%;
		margin: 0 auto;
		height: 1.2rem;
		line-height: 0.5rem;
		font-size: 0.3rem;
		cursor:pointer;

		background: url('../../static/rectNew38-2.png') no-repeat;
		background-size: 100% 94%;
		background-position: center 2px;
	}

	.oneDevice .deviceName {
		color: #36b6ef;
		height: 0.5rem;
		line-height: 0.5rem;
	} */

/* .deviceInfo i {
		transform: translate(0);
		font-size: 0.45rem;

		color: #ccc;
	} */

.main_center {
	display: inline-block;
	margin: 0 auto;
	margin-top: 0.1rem;
	position: relative;
	z-index: 3;
	width: 100%;
	height: 986px;
	/* border: 1px solid green; */
}

.centerTotal {
	width: 34%;
	display: flex;
	position: relative;
	z-index: 10;
	justify-content: space-between;
	align-items: center;
	height: 1.4rem;
	margin: 0 auto;
	margin-top: 0.3rem;
	background-color: rgba(0, 0, 0, 0.7)
		/* border:1px solid red; */
}

.totalItem {
	display: inline-block;
	min-width: 20%;
	height: 1.4rem;
	line-height: 0.7rem;
	font-size: 0.3rem;
	color: #fff;
	/* border:1px solid red; */
}

.totalItem div:first-child {
	color: #0066ff;
	font-size: 0.5rem;
	font-weight: 600;
}

.main_center_top {
	width: 100%;
	height: 100%;
	position: relative;
	/* border: 1px solid #ccc; */
}

.content {
	width: 100%;
	height: 100%;
	display: inline-block;
	position: fixed;
	z-index: 3;
	top: -0.14rem;
	left: 0;
	/* border:1px solid red; */
	/* box-shadow: 0 0 10px inset #20355c; */
}

.main_center_bottom {
	width: 100%;
	height: 34%;
	position: absolute;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 10px inset #20355c;
	/* border: 1px solid #ccc; */
}

#echartBar {
	width: 100%;
	height: 84%;
	/* border:1px solid red; */
}

#waterBar,
.echartBox {
	width: 100%;
	height: 84%;
	/* border:1px solid red; */
}

.echartBox .topBox,
.echartBox .bottomBox {
	margin: 0 auto;
	width: 100%;
	height: 50%;
	text-align: center;
	font-size: 0.3rem;
	/* border:1px solid red; */
	line-height: 1rem;
}

.viewItem {
	height: 1rem;
	line-height: 1rem;
}

.viewItem i {
	color: #2984FF;
	font-size: 0.5rem;
	margin-right: 0.2rem;
	vertical-align: middle;
}

.viewItem img {
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.2rem;
	vertical-align: middle;
}

.viewItem span {
	display: inline-block;
	width: 1.8rem;
	/* text-align:left; */
	color: #fff;
	margin-right: 0.3rem;
}

.viewItem span:first-child {
	text-align: center;
}

.viewItem span:nth-child(3) {
	font-weight: 700;
	font-size: 0.35rem;
}

.topBox i {
	color: #2984FF;
	font-size: 0.6rem;
}

.topBox .topBoxOne,
.topBox .topBoxTwo {
	display: inline-block;
	width: 30%;
	/* border:1px solid red; */
}

.bottomBox {
	width: 60%;
	line-height: 3rem;
}

.main_right {
	/* float: right; */
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 0.1rem;
	position: absolute;
	right: 0.2rem;
	top: 0;
	width: 22%;
	height: 986px;
	z-index: 10;
	/* border: 1px solid red; */
}

.main_right_top {
	width: 100%;
	height: 33%;
	position: relative;

	background: url('../../static/borderBack.png') no-repeat;
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* background-color:rgba(0,0,0,0.6);
		box-shadow: 0 0 20px inset #1b3589; */
	/* border: 1px solid #ccc; */
}

.main_right_middle {
	width: 100%;
	height: 33%;
	position: relative;

	background: url('../../static/borderBack.png') no-repeat;
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* background-color:rgba(0,0,0,0.6);
		box-shadow: 0 0 20px inset #1b3589; */
}

.main_right_bottom {
	width: 100%;
	position: relative;
	/* position: absolute;
		bottom: 0; */
	height: 33%;
	/* border: 1px solid #CCC; */
	/* padding: 0.1rem 0.2rem; */
	background: url('../../static/borderBack.png') no-repeat;
	background-size: 100% 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* background-color:rgba(0,0,0,0.6);
		box-shadow: 0 0 20px inset #1b3589; */
}

/* .alarm_head {
		font-size: 0.35rem;
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;

		text-align: left;
		padding-left: 0.1rem;
		font-weight: 700;
		font-size: 0.4rem;

	}

	.alarm_head img {
		vertical-align: middle;
		margin-right: 0.1rem;
		width: 0.5rem;
		height: 0.5rem;
	} */

.alarm_list {
	font-size: 0.3rem;
	text-align: left;
	width: 100%;
	/* margin-top: 0.1rem; */
	padding: 0.1rem 0.1rem;
	/* padding-right: 0.2rem; */
	height: 90.5%;
	-ms-overflow-style: none;
	/* IE 10+ */
	scrollbar-width: none;
	/* Firefox */
	overflow-style: none;
	overflow: auto;
}

.alarm_list::-webkit-scrollbar {
	display: none;
	/* Chrome Safari */
}

/* .alarm_info {
		width: 100%;
		min-height: 1.7rem;
		max-height: 2.7rem;
		line-height: 0.6rem;
		padding: 0.1rem 0 0.1rem 0.2rem;

		font-size: 0.25rem;
		box-sizing: border-box;
		background: url('../../static/borderBC.png') no-repeat left top;
		background-size: 100% 99%;

	} */

/* .alarm_time {
		color: #B9bbc1;
		height: 0.5rem;
		line-height: 0.5rem;
	}

	.alarm_point {
		color: #36b6ef;
		margin-right: 0.1rem;
	} */

.hd {
	width: 100%;
	height: 1.6rem;
	color: white;
	/* margin-bottom: 0.2rem; */
	background-color: #18182f !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: url(../../static/headBC.png) no-repeat -0.5rem center;
	background-size: 100% 1.6rem;
	/* border: 1px solid red; */
}

.hd-wrap {
	position: relative;
	height: 1.6rem;
	line-height: 1.6rem;
	/* background-color: rgba(0,0,0,0.4)!important; */
	/* background-size: 600px 5px; */
	/* background: url(../../static/topbc5.png) no-repeat center bottom; */
	background-size: 100% 3px;
}

.nowTime {
	width: 12rem;
	/* width: 11rem; */
	height: 0.9rem;
	line-height: 0.9rem;
	color: white;
	position: absolute;
	font-size: 0.3rem;
	top: 0;
	left: 0;
	/* padding-right: 2rem; */
	/*隐去尖角部分 */
	text-align: left;
	padding-left: 0.2rem;
	z-index: 1 !important;

}

.hd #weather {
	/* border:1px solid red; */
	position: absolute;
	height: 1.4rem;
	line-height: 1.4rem;
	top: 0;
	right: -0.1rem;
	width: 11rem;
	display: inline-block;
	text-align: right;
	padding-right: 0.3rem;

}

.exit,
.isScreen {
	width: 25%;
	float: right;
	text-align: right;
	padding: 0;
	height: 0.9rem;
	line-height: 0.9rem;
	font-size: 0.35rem;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
	/* border: 1px solid red; */
}

.exit:hover,
.isScreen:hover {
	background-color: transparent;
	color: deepskyblue;
}

.exitIcon,
.isScreenIcon {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	line-height: 0.6rem;
	text-align: center;
	background-color: #0c285B;
	vertical-align: middle;
	margin-right: 0.1rem;
}

.exit:hover i,
.isScreen:hover i {
	/* background-color: transparent; */
	color: deepskyblue !important;
}

.green {
	color: limegreen;
}

.bottom {
	height: 15rem;
	position: relative;
}

.bottom_top {
	position: relative;
	/* margin: 0.2rem auto;
		margin-top:0; */
	width: 99%;
	height: 1rem;
	line-height: 1rem;
	padding: 0 0.2rem;
	/* z-index:1!important; */
	/* background-color: rgba(17, 17, 17, 0.5); */
	background: url(../../static/textBackground1.png) no-repeat left center;
	/* background: url(../../static/textBackground2.png) no-repeat -30px center; */
	background-size: 100% 80%;
	/*约等于#111透明0.5*/
	/* box-shadow: 0px 0px 10px 5px inset #0b2c51; */
}

.bottom_top:after {
	content: '.';
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}

.bottom_top_left {
	float: left;
	min-width: 50%;
	text-align: left;
	height: 1rem;
	line-height: 1rem;
	/* border:1px solid red; */
}

.bottom_top_right {
	float: right;
	width: auto;
	text-align: left;
	height: 1rem;
	line-height: 1rem;
	margin-left: 0.4rem;
	color: #222;
}

#searchform {
	position: relative;
	/* margin-top: 0.1rem; */
	margin-bottom: 0.1rem;
	padding-top: 0.2rem;
	padding-left: 0.3rem;
	width: 100%;
	font-size: 0.3rem;
	height: 1.9rem;
	line-height: 1rem;
	text-align: left;
	background-color: #152143;
	/* border-bottom: 2px solid #ccc; */
}

#isfull,
.mainIframe {
	width: 99%;
	/* padding:0; */
	/* max-height:12rem; */
	height: calc(100% - 1.1rem);
	text-align: center;
	background-color: transparent;
	margin: 0 auto;
	overflow: auto;
	-ms-overflow-style: none;
	/* IE 10+ */
	scrollbar-width: none;
	/* Firefox */
	overflow-style: none;

}

#isfull::-webkit-scrollbar,
.mainIframe::-webkit-scrollbar {
	display: none;
	/* Chrome Safari */
}

#mainIframe {
	transition: all 1s linear;
}

.slave_top {
	min-width: 15%;
	height: 0.6rem;
	line-height: 0.6rem;
	margin-top: 2px;
	text-align: left;
	padding: 0 0.1rem;
	font-size: 0.3rem;
	color: #fff;
	/* font-size:0.32rem; */
	font-weight: 700;
	/* text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important; */
	/* background-color:rgba(0,0,0,0.1); */
}

.inpu {
	width: 5.5rem;
	height: 0.8rem;
	color: white !important;
	background-color: transparent !important;
	vertical-align: middle;
	border: 1px solid red;
}

.databox {
	-ms-display: flex !important;
	-webkit-display: flex !important;
	display: flex !important;
	/* -ms-grid-template-columns: repeat(auto-fill, 6.2rem);
		-webkit-grid-template-columns: repeat(auto-fill, 6.2rem);
		grid-template-columns: repeat(auto-fill, 6.2rem); */
	position: relative;
	width: 100%;
	box-sizing: border-box;
	/* -ms-min-height: 9rem;
        -webkit-min-height: 9rem;
		min-height: 9rem;
        height:calc(inherit - 1rem);*/
	height: auto;
	flex-flow: row;
	flex-wrap: wrap;
	padding: 0 0.1rem 0.1rem 0;
	/* padding-left:0; */
	/* flex: auto; */
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	/* justify-content: flex-start;
		align-items: flex-start; */
	border-radius: 5px;

}

.itembox,
.itembox_6 {
	text-align: left;
	min-width: 6rem;
	max-width: 7.4rem;
	/* min-width:6.6rem;
		max-width: 8rem; */
	height: 1.2rem;
	/*1.6rem*/
	padding: 0 !important;
	/* max-height:2rem; */
	border: 1px solid #ccc;
	font-size: 0.25rem;
	margin: 4px;
	border-radius: 5px;
}

.itembox_6 {
	min-width: 6rem !important;
	max-width: 10rem !important;
}

.imgbox {
	float: left;
	width: 1.2rem;
	height: 1.2rem;
	display: inline-flex;
	align-items: center;
	border-right: 1px solid #ccc;
}

.pic {
	display: block;
	width: 0.8rem;
	height: 0.8rem;
	margin: 0 auto;
}

.valuebox,
.valuebox_6 {
	min-width: 4.9rem;
	max-width: 6rem;
	/* min-width:5rem;
		max-width:6.4rem; */
	height: 1.2rem;
	line-height: 0.6rem;
	float: right;
	/* border:1px solid red; */
}

.valuebox_2 {
	min-width: 2.2rem !important;
	max-width: 3.2rem !important;
}

.valuebox_6 {
	min-width: 6rem !important;
	max-width: 8rem !important;
}

.roundline {
	height: 0.6rem;
	width: 100%;
	padding: 0.1rem !important;
	line-height: 0.6rem;
	/* border:1px solid red; */
	box-sizing: border-box;
}

.roundline .nameLine {
	float: left;
	height: 0.5rem;
	line-height: 0.5rem;
	width: 100%;
	padding-right: 0.1rem;
}

.read,
.write {
	display: inline-block;
	box-sizing: border-box;
	width: 2rem;
	height: 0.5rem;
	line-height: 0.5rem;
	padding: 0;
	padding-left: 2px;
	overflow: hidden;
	text-align: left;
	margin-right: 0.05rem;
	margin-bottom: 0.2rem;
	border-radius: 4px;
	font-size: 0.3rem;
	font-weight: 700;
	border: 1px solid #ccc;
	color: #fff;
}

.write {
	border: 1px solid deepskyblue;
	color: deepskyblue;
	cursor: pointer;
}

.btn,
.newAll {
	box-sizing: border-box;
	display: inline-block;
	padding: 0 !important;
	width: 1.4rem;
	padding: 0;
	height: 0.5rem;
	text-align: center;
	font-size: 0.25rem;
	line-height: 0.5rem;
	border: 1px solid #ccc;
	vertical-align: middle;
	background-color: transparent;
	color: white;
	/* margin-top: 0.1rem; */
}

.btn:hover {
	border: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 10px 5px inset rgba(0, 0, 0, 0.8);
}

#myChart,
#myChartLive,
#without {
	min-width: 80%;
	height: 420px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 0 !important;
	background-color: transparent;
	/* box-shadow: 0px 0px 10px 5px inset deepskyblue; */
}

.story,
.live {
	float: left;
	width: 1.8rem;
	display: inline-block;
	text-align: center;
	height: 0.8rem;
	cursor: pointer;
	line-height: 0.8rem;
	font-size: 0.3rem;
	padding: 0;
	/* border: 1px solid deepskyblue; */
	/* background-color: #B7873C; */
}

.chartTime {
	position: absolute;
	top: 2rem;
	left: 66%;
	z-index: 10;
	color: white;
}


.toptit {
	background-color: #222 !important;
	/* background-color:deepskyblue; */
}

#without {
	line-height: 450px;
	text-align: center;
	font-size: 0.3rem;
}

.roundline .bt_outer {
	box-sizing: content-box !important;
	transform: translateY(0);
	/* transform:translateY(-0.05rem); */
}

.roundline .alarm_on {
	transform: translateY(0);
	/* transform:translateY(-4px); */
}

.roundline .alarm_off {
	transform: translateY(0);
	/* transform:translateY(-4px); */
}

.turn {
	cursor: pointer;
}

.cardActive {
	font-weight: 900;
	font-size: 0.34rem;
	cursor: default;
}

.newAll {
	background-color: transparent;
	border: 1px solid deepskyblue;
	text-decoration: none;
	/* box-shadow: 0px 0px 10px 5px inset deepskyblue; */
}

.newAll:hover {
	border: none;
	background-color: transparent !important;
	color: deepskyblue;
	box-shadow: 0px 0px 10px 5px inset deepskyblue;
}

.topLeftArrow,
.topRightArrow,
.bottomLeftArrow,
.bottomRightArrow {
	position: absolute;
	/* color: #9cccff; */
	color: #fff;
	font-weight: 700;
	font-size: 0.4rem;
}

.topLeftArrow {
	top: -0.1rem;
	left: -0.12rem;
	transform: rotateZ(45deg);
}

.topRightArrow {
	top: -0.12rem;
	right: -0.1rem;
	transform: rotateZ(135deg);
}

.bottomLeftArrow {
	bottom: -0.12rem;
	left: -0.1rem;
	transform: rotateZ(-45deg);
}

.bottomRightArrow {
	bottom: -0.1rem;
	right: -0.12rem;
	transform: rotateZ(-135deg);
}

.topRight,
.topLeft {
	width: 4rem;
	height: 0.8rem;
	position: fixed;
	z-index: 10;
	right: 9.51rem;
	top: 0.433rem;
	/* border:1px solid red; */
	cursor: pointer;
}

.topLeft {
	left: 9.51rem;
	top: 0.433rem;
}

.weaImg {
	width: 32px;
	height: 22px;
	vertical-align: middle;
}



.rad+.rad {
	margin-left: 0.2rem;
}

.itembox_6 .rad+.rad {
	margin-left: 0.2rem;
}

.itembox .rad+.rad {
	margin-left: 0.2rem;
}

p {
	line-height: 0.5rem;
}

.bt_inner_off {
	background: radial-gradient(circle, white 5%, red) !important;
	/* background-color:orangered!important; */
}

.bt_inner_on {
	background: radial-gradient(circle, white 5%, green) !important;
	/* background-color:forestgreen!important; */
}

.itembox {
	margin-left: 0.1rem;
}

.itembox_6 {
	margin-left: 0.1rem;
}

.big>>>.el-input__inner,
.optionBox>>>.el-input__inner {
	width: 5.5rem !important;
	background-color: #0f2654;
	color: white;
	border: 1px solid #2f4f8b;
	border-radius: 0;
}

.optionBox>>>.el-input__inner {
	width: 100% !important;
}

.dataType>>>.el-input__inner {
	height: 0.6rem;
	line-height: 0.6rem;
	vertical-align: middle;
}

.big>>>.el-input__icon {
	color: #36b6ef;
}

.oneOption {
	color: #fff !important;
	padding-left: 10px;
}

.oneOption:hover {
	color: #fff !important;
	/* #2f4f8b,#152143 */
	background-color: #0b1738 !important;
}

.oneOption {
	/* color:#111; */
	background-color: #0f2654 !important;
}

.viewBox {
	width: 200px;
	font-size: 0.35rem;
	color: white;
	position: fixed;
	top: 0.9rem;
	right: 0.3rem;
	height: auto;
	z-index: 10000;
}

.oneView {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	margin-top: 0.2rem;
	background-color: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	/*deepskyblue透明度0.5*/
	/* background-color:rgba(0,191,255,1); */
	border-radius: 4px;
}

.active_2 {
	color: deepskyblue;
	background-color: rgba(0, 0, 0, 0.6);
	border: 1px solid deepskyblue;
}

.viewbtn_2 {
	display: flex;
	/* display: inline-block; */
	position: fixed;
	height: 0.6rem;
	top: 0.3rem;
	right: 0.3rem;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.3) !important;
	border: none;
	padding: 0.1rem;
	max-width: 1.8rem;
	justify-content: space-between;
	align-items: center;
	border-radius: 4px;
}

.viewbtn_2 img {
	width: 0.4rem;
	height: 0.4rem;
	cursor: pointer;
}

.alarmOper,
.swiperBtn {
	background-color: #409eff;
	color: #fff;
	font-size: 0.3rem;
	min-width: 1.2rem;
	padding: 0 0.1rem;
	height: 0.7rem;
	line-height: 0.7rem;
}

.alarmOper:hover,
.swiperBtn:hover {
	background-color: #0b1738;
	color: deepskyblue;
}

.noAlarm {
	color: #ccc;
	font-size: 0.3rem;
}

.platFormTitle {
	width: 100%;
	height: 1.4rem;
	line-height: 1.4rem;
	text-align: center;
	/* border:1px solid red; */
}

.platFormTitle span {
	display: inline-block;
	vertical-align: top;
	font-size: 0.6rem;
	/* color:#5bbffe; */
	color: #fff;
	font-weight: 550;
	text-shadow: 6px 6px 6px rgba(0, 0, 0, 1) !important;
	/* text-shadow: 0px 0px 10px 10px #5bbffe; */
}

.swiperInput /deep/ .el-input__inner {
	padding-right: 0;
}

.bottomBox /deep/ .el-progress__text {
	color: #fff;
}
</style>
